Skip to content

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 NameTypeDefaultDescription
styleJSX.CSSProperties{}Inline styles to apply directly to the component’s root element.
classstring""Additional CSS classes to apply to the component.
refTextInputRef | undefinedundefinedA 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.
valuestring""The initial value of the input. Use this to set the initial value displayed on the input.
disabledbooleanfalseDisables the input if set to true.
readonlybooleanfalseSpecifies if the input is only able to be read. If set to true, the input will not accept values.
max-symbolsnumberundefinedMaximum number of symbols the input can accept.
class-disabledstringundefinedOptional class to apply when the input is disabled.
onChange(value: string) => voidundefinedA 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.
MethodParametersReturn ValueDescription
changeValue newValue: stringvoidProgrammatically sets a new value in the input field.
clear NonevoidClears the current value of the input.
AccessorReturn ValueDescription
value string Returns the current value of the input reactively. Use value()to read the latest input.

Allows the injection of content before the input element — useful for icons, labels, or additional UI elements.

Prop NameTypeDefaultDescription
styleJSX.CSSProperties{}Inline styles to apply directly to the before slot container.
classstring""Additional CSS classes to style the before slot container.
childrenJSX.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;

Allows the injection of content after the input element — ideal for suffixes, icons, or clear buttons.

Prop NameTypeDefaultDescription
styleJSX.CSSProperties{}Inline styles to apply directly to the after slot container.
classstring""Additional CSS classes to style the after slot container.
childrenJSX.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;

Used to override or extend the internal input element. This gives you full control over the input’s look and behavior.

Prop NameTypeDefaultDescription
styleJSX.CSSProperties{}Inline styles to apply directly to the input element.
classstring""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;

Use this to define a placeholder content which will be displayed when the input has no value.

Prop NameTypeDefaultDescription
styleJSX.CSSProperties{}Inline styles to apply directly to the input element.
classstring""Additional CSS classes to style the input element.
childrenJSX.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;
  • To get the current value of the TextInput component, use the onChange prop.
  • You can store the value in a state variable for use elsewhere.
  1. Define a state variable (e.g., using createSignal) to store the input value.
  2. Pass a callback to the onChange prop that updates this state variable.
  3. 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;

Alternatively, you can access the input’s value directly via a ref, avoiding the need to manage a state variable.

  1. Declare a ref variable with type TextInputRef and pass it to the TextInput component.
  2. 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.

  1. Declare a ref variable with type TextInputRef and pass it to the TextInput component.
  2. Call ref.changeValue() from anywhere (e.g., a keyboard event or external button) to set the value programmatically.
  3. 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;