Label
Form label with required and optional indicators.
Quick Preview
Usage
<Label htmlFor="email" withAsterisk>
Email
<LabelSupplement>(used for receipts)</LabelSupplement>
</Label>Examples
Default Label
Use this as the starting point for Label. Keep product data, routing, fetching, and authorization logic in the consuming app.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
withAsterisk | boolean | false | Shows required marker. |
showOptionalText | boolean | false | Appends optional helper text. |
LabelSupplement | native span props | - | Adds inline secondary text with baseline alignment and wrapping. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.