Label is a light wrapper around the basic HTML label element.
Labels are associated with controls like input or checkbox, however before using this component consider using one of the provided Field components that are available. Use this Label to compose more complex Field type components.
Accessibility
For accessibility purposes the component needs either to have the htmlFor prop set to link it to the control it is associated with or to wrap around the component that it is labelling.
Sizes
<Label size="sm">A small label</Label>
Required
To denote a required field, the required prop will add an * suffix to the label text.
<Label required>A normal label</Label>
API Reference
| Prop | Type | Default | Required |
|---|---|---|---|
align | "center" | "start" | start | - |
appearance | "standard" | "modern" | - | - |
as | JSX.IntrinsicElements | label | - |
direction | "reverse" | "row" | row | - |
required | boolean | - | - |
size | "sm" | "md" | md | - |
type | "inline" | "block" | block | - |