TextInput
The TextInput
component provides a highly customizable input field for handling text data.
It supports various slots for injecting UI elements before or after the input, as well as customizing the input and placeholder behavior directly.
The component automatically manages user input and provides utility methods to programmatically update or clear the value. This makes it suitable for use in both simple and complex form UIs.
To use the TextInput
component, simply import it and pass any required props.
import TextInput from '@components/Basic/TextInput/TextInput';
const App = () => { return ( <TextInput /> );};
export default App;
Prop Name | Type | Default | Description |
---|---|---|---|
style | JSX.CSSProperties | {} | Inline styles to apply directly to the component’s root element. |
class | string | "" | Additional CSS classes to apply to the component. |
ref | TextInputRef | undefined | undefined | A reference to the component that gives you access to its methods and the underlying HTML element. Useful if you need to set the value of the input programmatically. |
value | string | "" | The initial value of the input. Use this to set the initial value displayed on the input. |
disabled | boolean | false | Disables the input if set to true. |
readonly | boolean | false | Specifies if the input is only able to be read. If set to true, the input will not accept values. |
max-symbols | number | undefined | Maximum number of symbols the input can accept. |
class-disabled | string | undefined | Optional class to apply when the input is disabled. |
onChange | (value: string) => void | undefined | A function that is called every time the input’s value has changed. It can be used to retrieve the up to date value of the input. |
Methods
Section titled “Methods”Method | Parameters | Return Value | Description |
---|---|---|---|
changeValue | newValue: string | void | Programmatically sets a new value in the input field. |
clear | None | void | Clears the current value of the input. |
Accessors
Section titled “Accessors”Accessor | Return Value | Description |
---|---|---|
value | string | Returns the current value of the input reactively. Use value() to read the latest input. |
TextInput.Before
Section titled “TextInput.Before”Allows the injection of content before the input element — useful for icons, labels, or additional UI elements.
Properties
Section titled “Properties”Prop Name | Type | Default | Description |
---|---|---|---|
style | JSX.CSSProperties | {} | Inline styles to apply directly to the before slot container. |
class | string | "" | Additional CSS classes to style the before slot container. |
children | JSX.Element | "" | Content to be rendered inside the before slot. This can be used to add custom elements or styles. |
import TextInput from '@components/Basic/TextInput/TextInput';import MagnifierIcon from @assets/icon.svg?component-solid;
const App = () => { return ( <TextInput > <TextInput.Before> <MagnifierIcon /> </TextInput.Before> </TextInput> );};
export default App;
TextInput.After
Section titled “TextInput.After”Allows the injection of content after the input element — ideal for suffixes, icons, or clear buttons.
Properties
Section titled “Properties”Prop Name | Type | Default | Description |
---|---|---|---|
style | JSX.CSSProperties | {} | Inline styles to apply directly to the after slot container. |
class | string | "" | Additional CSS classes to style the after slot container. |
children | JSX.Element | "" | Content to be rendered inside the after slot. This can be used to add custom elements or styles. |
import TextInput from '@components/Basic/TextInput/TextInput';import BinIcon from @assets/icon.svg?component-solid;
const App = () => { return ( <TextInput > <TextInput.After> <BinIcon /> </TextInput.After> </TextInput> );};
export default App;
TextInput.Input
Section titled “TextInput.Input”Used to override or extend the internal input element. This gives you full control over the input’s look and behavior.
Properties
Section titled “Properties”Prop Name | Type | Default | Description |
---|---|---|---|
style | JSX.CSSProperties | {} | Inline styles to apply directly to the input element. |
class | string | "" | Additional CSS classes to style the input element. |
import TextInput from '@components/Basic/TextInput/TextInput';
const App = () => { return ( <TextInput > <TextInput.Input style={{ padding: '2vmax', color: 'white', background: 'black' }} /> </TextInput> );};
export default App;
TextInput.Placeholder
Section titled “TextInput.Placeholder”Use this to define a placeholder content which will be displayed when the input has no value.
Properties
Section titled “Properties”Prop Name | Type | Default | Description |
---|---|---|---|
style | JSX.CSSProperties | {} | Inline styles to apply directly to the input element. |
class | string | "" | Additional CSS classes to style the input element. |
children | JSX.Element | "" | Content to be rendered inside the placeholder slot. This can be used to add content as the input’s placeholder. |
import TextInput from '@components/Basic/TextInput/TextInput';
const App = () => { return ( <TextInput > <TextInput.Placeholder>Enter nickname</TextInput.Placeholder> </TextInput> );};
export default App;
Retrieve the input value
Section titled “Retrieve the input value”- To get the current value of the
TextInput
component, use theonChange
prop. - You can store the value in a state variable for use elsewhere.
- Define a state variable (e.g., using
createSignal
) to store the input value. - Pass a callback to the
onChange
prop that updates this state variable. - Use the state variable wherever you need the input’s value.
import TextInput from '@components/Basic/TextInput/TextInput';import { createSignal } from 'solid-js';
const App = () => { const [inputValue, setInputValue] = createSignal("");
return ( <> <TextInput onChange={(value) => setInputValue(value)} /> <div>{inputValue()}</div> </> );};
export default App;
Retrieve the input value with ref
Section titled “Retrieve the input value with ref”Alternatively, you can access the input’s value directly via a ref
, avoiding the need to manage a state variable.
- Declare a
ref
variable with typeTextInputRef
and pass it to theTextInput
component. - Use
ref.value()
whenever you need the input’s current value.
import TextInput from '@components/Basic/TextInput/TextInput';import { TextInputRef } from '@components/Basic/Input/shared/types';import { createSignal } from 'solid-js';
const App = () => { let inputRef: TextInputRef;
const logValue = () => { console.log(inputRef!.value()) }
return ( <> <TextInput ref={inputRef!} /> <button onclick={logValue}>Log Value</button> </> );};
export default App;
Set the value of the input programmatically
Section titled “Set the value of the input programmatically”The TextInput
component allows you to set the value programmatically through its ref
.
- Declare a
ref
variable with typeTextInputRef
and pass it to theTextInput
component. - Call
ref.changeValue()
from anywhere (e.g., a keyboard event or external button) to set the value programmatically. - Optionally, you can clear the value of the input by calling
ref.clear()
.
import TextInput from '@components/Basic/TextInput/TextInput';import { TextInputRef } from '@components/Basic/Input/shared/types';import { createSignal } from 'solid-js';
const App = () => { let inputRef!: TextInputRef;
const fillInput = (value: string) => { sliderRef.changeValue(value); }
const clearInput = () => { sliderRef.clear(); }
return ( <> <TextInput ref={inputRef!} /> <button onclick={() => fillInput('Test')}>Fill input</button> <button onclick={clearInput}>Clear input</button> </> );};
export default App;