Components
Usage
TextField allows users to enter and edit text. It supports both controlled
(value) and uncontrolled (defaultValue) usage.
import { TextField } from "@udixio/ui-react"<TextField label="Email" name="email" type="email" placeholder="you@company.com" />Variants
- filled (default)
- outlined
<div className="flex items-end gap-6">
<TextField label="Name" name="name" variant="filled" />
<TextField label="Name" name="name2" variant="outlined" />
</div>Leading/trailing icon and suffix
Use leadingIcon, trailingIcon, or suffix for extra affordances.
Multi-line
Set multiline for an auto-growing textarea.
<div className="space-y-4">
<TextField label="Description" name="desc1" multiline />
<TextField label="Notes" name="desc2" multiline defaultValue="Initial content" />
</div>Error and supporting text
Show validation and helper text with errorText and supportingText.
<div className="space-y-2">
<TextField label="Username" name="u1" supportingText="Use 3–16 characters" />
<TextField label="Password" name="p1" errorText="Password is too short" />
</div>Controlled vs uncontrolled
function Example() {
const [value, setValue] = React.useState('hello');
return (
<div className="space-y-3">
<TextField
label="Controlled"
name="c1"
value={value}
onChange={(event) => setValue(event.target.value)}
/>
<TextField label="Uncontrolled" name="u2" defaultValue="Initial value" />
</div>
);
}Autofocus
Use the autoFocus prop to automatically focus the TextField on mount.
<TextField label="Search" name="q" autoFocus />