Component

Label renders a native label that names a form control. Use it with htmlFor, or wrap the control, so screen readers announce the control's name and clicking the label focuses it.

View component changelog
preview
React
'use client'

import Label from "@radui/ui/Label"

const LabelExample = () => (
    <div className="flex w-64 flex-col gap-2">
        <Label htmlFor="label-example-email">Email address</Label>
        <input
            id="label-example-email"
            type="email"
            placeholder="you@example.com"
            className="rounded-md border border-gray-400 bg-gray-50 px-3 py-2 text-sm text-gray-1000"
        />
    </div>
)

export default LabelExample
  • Native <label>, so clicking it focuses or toggles the control it names
  • Name a control with htmlFor, or by wrapping the control
  • Double-clicking the label doesn't select its text; nested controls still get their own clicks
  • asChild to render your own element with the label's props
  • Unstyled by default, with Clarity and baremetal styles available

Renders a native <label> that names a form control, either through htmlFor or by wrapping the control.

PropTypeDefault
htmlFor
string
--
asChild
boolean
false
customRootClass
string
''
className
string
''
Edit this page on GitHub →