TextField is a form input component that allows users to enter single-line text values. It supports both controlled and uncontrolled modes, with extensive customization options.
Basic usage
import { TextField } from 'reshaped';
function Example() {
return (
<TextField
name="username"
placeholder="Enter your username"
/>
);
}
Controlled component
import { useState } from 'react';
import { TextField } from 'reshaped';
function ControlledExample() {
const [value, setValue] = useState('');
return (
<TextField
name="email"
value={value}
onChange={({ value }) => setValue(value)}
placeholder="Enter your email"
/>
);
}
Uncontrolled component
import { TextField } from 'reshaped';
function UncontrolledExample() {
return (
<TextField
name="comment"
defaultValue="Initial value"
onChange={({ name, value }) => console.log(name, value)}
/>
);
}
With FormControl
import { FormControl, TextField } from 'reshaped';
function FormExample() {
const [hasError, setHasError] = useState(false);
return (
<FormControl hasError={hasError}>
<FormControl.Label>Email address</FormControl.Label>
<TextField
name="email"
placeholder="[email protected]"
/>
<FormControl.Helper>
We'll never share your email with anyone else.
</FormControl.Helper>
<FormControl.Error>
Please enter a valid email address.
</FormControl.Error>
</FormControl>
);
}
Variants
import { TextField } from 'reshaped';
<TextField variant="outline" name="default" placeholder="Outline (default)" />
<TextField variant="faded" name="faded" placeholder="Faded variant" />
<TextField variant="ghost" name="ghost" placeholder="Ghost variant" />
<TextField variant="headless" name="headless" placeholder="Headless variant" />
import { TextField } from 'reshaped';
<TextField size="small" name="small" placeholder="Small" />
<TextField size="medium" name="medium" placeholder="Medium (default)" />
<TextField size="large" name="large" placeholder="Large" />
<TextField size="xlarge" name="xlarge" placeholder="Extra large" />
With icons and affixes
import { TextField } from 'reshaped';
import IconSearch from './icons/Search';
<TextField
name="search"
placeholder="Search..."
icon={IconSearch}
/>
<TextField
name="price"
placeholder="0.00"
prefix="$"
suffix="USD"
/>
With slots
import { TextField, Button } from 'reshaped';
import IconSend from './icons/Send';
<TextField
name="message"
placeholder="Type a message"
endSlot={
<Button size="small" icon={IconSend} />
}
/>
Validation states
import { TextField } from 'reshaped';
<TextField
name="invalid"
placeholder="Invalid input"
hasError
/>
Accessibility
TextField is built with accessibility in mind:
- Uses semantic HTML input elements
- Supports ARIA attributes via
inputAttributes
- Works with FormControl for proper label associations
- Keyboard navigable and screen reader friendly
Name of the text field input element
Unique identifier for the text field
Value of the text field, enables controlled mode
Default value of the text field, enables uncontrolled mode
Placeholder text when there is no value
size
'small' | 'medium' | 'large' | 'xlarge'
default:"medium"
Component size. Supports responsive values.
variant
'outline' | 'faded' | 'ghost' | 'headless'
default:"outline"
Component render variant
Disable the text field user interaction
Render in the focused state
Show an error state. Automatically inherited when used inside FormControl.
Enable multiline text field wrapping
Change border radius to be fully rounded
Icon of the text field at the start position
Icon of the text field at the end position
Node for inserting content before the text field value
Node for inserting content after the text field value
Node for inserting text content before the text field value
Node for inserting text content after the text field value
Padding inline end, base unit token number multiplier
Padding inline start, base unit token number multiplier
onChange
(args: { name: string, value: string, event: Event }) => void
Callback when the text field value changes
onFocus
(e: React.FocusEvent<HTMLInputElement>) => void
Callback when the text field is focused
onBlur
(e: React.FocusEvent<HTMLInputElement>) => void
Callback when the text field is blurred
Additional classname for the root element
Additional attributes for the root element
Additional attributes for the input element. Use for ARIA attributes.