Forms · astro-ui · Label
Label
Form label with required/disabled states and two sizes.
Label renders a semantic <label> tied to a control via for. Required adds a visual marker; disabled dims the text to match a disabled control.
Features
- Native <label> association via for
- required marker
- disabled state matches disabled inputs
- 2 sizes
Usage
---
import { Label, Input } from "astro-ui";
---
<Label for="email" required>Email</Label>
<Input id="email" type="email" />Demos
Basic
<Label for="email" required>Email</Label>
<Input id="email" type="email" />API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
for | string | — | Must match the control's id. |
required | boolean | false | Adds the required marker. |
disabled | boolean | false | Dimmed text state. |
size | "sm" | "md" | "md" | Text scale. |
class | string | — | Merged via cn(); Tailwind classes welcome. |
id | string | — | Element id. |
Accessibility
Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.
- Native
<label>association;aria-requiredsupport for required fields
FAQ
Why not just wrap the input?
Wrapping works, but explicit for/id keeps the association when the control isn't a direct child (grids, portals) and is what this component enforces.
Changelog
Version history mentioning Label.
v0.1.0 — 2026-11-11
added
- Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.