Label
The smallest component in the kit: one piece of text, two states, and font size and weight bound to tokens rather than typed in.
Default and Disabled, and Disabled is just 50% opacity. A label has no hover, no focus and no pressed state, because you never interact with it directly - you interact with whatever it is attached to, and it follows along.
It is one of the few components in the kit binding font size and weight as well as colour: text.sm.font-size and font-weight.medium alongside base.foreground. Change the scale and the label follows without anyone editing it.
The source is direct about it: for a form field use Field, which brings its own label, description and error handling. Reach for Label on its own when there is nothing to describe and nothing to validate - a checkbox row, a lone input.
Three places it earns its keep
620 by 580. Above an input, beside a checkbox, and greyed out with the control it belongs to. Both the Input and the Checkbox are real instances, so the disabled example is two components agreeing rather than one drawing the other.
Worth noticing in the checkbox row: the Checkbox component carries its own label slot, and the example leaves it empty and puts a Label beside it instead. That is the point of the page - the standalone one exists for the cases where the control's built-in slot is not what you want.
One component, two variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Label
Because you never interact with a label directly. There is no hover, no focus, no pressed - you interact with the control it names, and the label follows. Disabled is the one state it needs, and it is 50% opacity rather than a different colour.
The source is direct: for a form field use Field, which brings its own label, description and error handling. Reach for the standalone Label when there is nothing to describe and nothing to validate - a checkbox row, a single input, a control whose own label slot is not what you want.
More than usual. As well as base.foreground for the colour, it binds text.sm.font-size and font-weight.medium, so a change to the type scale reaches it without anyone opening the component. Most of the kit binds only colour.