Label: Right to left
Gaps and the indicator follow the reading direction.
This adds the example as components/examples/label/rtl.tsx, together with the Label component and the HextaUI theme tokens it needs.
pnpm dlx shadcn@latest add https://hextaui.com/r/label-rtl.jsonTo add only the component, follow the Label installation.
Props in this example
The Label props this example sets, from the API reference.
| Prop | Type | Default |
|---|---|---|
htmlForThe id of the control. Leave it out when the label wraps the control. | string | – |
indicatorMark the label from the control's required state. Off by default. | "required" | "optional" | – |
optionalText | ReactNode | "Optional" |
Every prop is in the Label API reference.
See them all, with keyboard support and accessibility notes, on the Label page.
- CalendarA date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
- CheckboxA checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.
- ComboboxA filterable select with chips, groups and async results, in a popup that resizes as you type.
- Date pickerA button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
- FieldLabels, descriptions and errors wired to their control, with validation states and layouts for forms.
- InputA text input with three sizes, invalid and read-only states, native validation styling and a 16px touch font so phones never zoom in.