Label

A form label. htmlFor is the point — clicking it focuses the control, and a screen reader announces the two together.

src/components/ui/label.tsx

About

From the component's own source, where it was written.

A form label. htmlFor is the point — clicking it focuses the control, and a screen reader announces the two together.

npx astralyx-ui add label

import { Label } from '@/components/ui/label'

<Label htmlFor="email" required>Email</Label>
<Input id="email" type="email" />

Change the props and the source below follows.

Email address

Props

children

requireddisabled control

tsx

<Label htmlFor="email">Email address</Label>
<Input id="email" />

tsx

<Label htmlFor="email" required>Email</Label>
<Input id="email" />

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

A form label. htmlFor is the point — clicking it focuses the control, and a screen reader announces the two together.

Extends ComponentProps<'label'>.

Prop	Type	Default	Description
required	boolean	false	Appends a destructive asterisk, hidden from assistive tech since the control carries `required` itself.
htmlFor	string	—	Id of the control this labels. Without it the click-to-focus and the announcement are both lost.