Components
Usage
TextField allows users to enter and edit text.
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 textLine to “multiLine” for auto-growing textarea, or “textAreas” for a standard textarea.
<div className="space-y-4">
<TextField label="Description" name="desc1" textLine="multiLine" />
<TextField label="Notes" name="desc2" textLine="textAreas" />
</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>