Field
Label, help text and required marker around exactly one control. It generates the id and wires `aria-describedby` for you, which is why controls should not be labelled by hand.
import Field from '@/components/ui/Field';Source: src/components/ui/Field.tsx
Examples
Label, help and required
Used only for withdrawals.
size="sm" — label and control shrink together
Props
<Field> props
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | — |
help | ReactNode | — | Helper text below the control, styled like the guide's `.input-metadata`. |
required | boolean | false | A control may still carry the native attribute alongside this prop, and several do: where the submit path validates nothing (login, password reset request, the SMS code), the browser's gate is the only thing standing between an empty box and a misleading answer. Those sites say so at the call. Drop the attribute once the handler reports the field itself. |
size | 'sm' | 'md' | 'md' | so a compact filter bar shrinks as a whole rather than control-only. |
className | string | '' | — |
childrenrequired | ReactElement<{ id?: string; 'aria-describedby'?: string; 'aria-required'?: boolean; }> | — | Exactly one form control (Input, Select, Dropdown, …). |
Accessibility
- The label is associated with the control, so clicking it focuses the field.
- Help text is referenced by aria-describedby, so it is read with the field rather than being decoration.
Usage
Do
- Give it exactly one child. The id-and-describedby wiring assumes one control.
Don’t
- Don’t use it around a Checkbox — a checkbox carries its own label, which is why Checkbox has a `required` prop of its own.
- Don’t add your own htmlFor/id; you will fight the generated ones.