All components
Inputs
Input & Field
Hairline form controls that focus to the accent, with a labelled Field wrapper for inputs, textareas, and selects.
Preview
Preview
light
dark
Code
<Field label="Email">
<Input placeholder="you@example.com" />
</Field>
<Field label="Message" hint="optional">
<Textarea placeholder="Type here…" />
</Field>Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Field label (Field wrapper). |
hint | ReactNode | — | Optional right-aligned hint. |
...props | input/textarea/select attrs | — | Standard native attributes. |
Usage
Do
- Always pair a control with a Field label.
- Use the hint slot for optional/format guidance.
Don't
- Rely on placeholder text as the only label.