Label
BaselineGive a form control a visible, accessible name.
Example
Click the label to focus the input.
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Label } from 'panel-ui-kit/label';import { Input } from 'panel-ui-kit/input'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Label htmlFor="name">Full name</Label> <Input id="name" autoComplete="name" /> </PanelUiTheme> );}When to use
Connect htmlFor to the control’s id. A placeholder is not a replacement for a label.
Keyboard
Click the label to focus its associated input. The label itself does not add a tab stop.
Properties
| Property | Values | Default |
|---|---|---|
htmlFor | Control id | — |
data-disabled | boolean | false |
motion | full · reduced · off · object | Inherited |