Components
A text field allows a user to enter a plain text value with a keyboard.
Text fields can be built with <input> or <textarea> and <label> elements, but you must manually ensure that they are semantically connected via ids for accessibility. TextField helps automate this, and handle other accessibility features while allowing for custom styling.
Loading preview...
import { Label } from "@/components/ui/field"
import { Input, TextField } from "@/components/ui/textfield"
function TextFieldDemo() {
return (
<TextField>
<Label>First name</Label>
<Input />
</TextField>
)
}
export { TextFieldDemo }