Form

Label

Form label with an optional required indicator, accessibly linked to its control.

Loading playground

Overview

Label displays a form label and an optional required indicator, linked to its control via for so screen readers and click-to-focus work as expected. Most forms get labels for free through <LField>; reach for Label directly when you need a label outside a Field (e.g. above a custom composite control).

Key Business & UX Benefits

Explicit for association makes labels click-to-focus targets, expanding the tap area on mobile and lifting form completion on small screens.
A single label primitive keeps required indicators and typography consistent across the product, so users learn the visual language once.
Pairing with <LField> covers most forms automatically; the standalone control is there for the edge cases without forcing a fork of the styling.

Different sizes

Label Medium

<LLabel size="m">First name</LLabel>

With required mark

Label Small Required

<LLabel size="s" required>First name</LLabel>

Label Medium Required

<LLabel size="m" required>First name</LLabel>

Feature List

Two sizes ('s', 'm', default 's') match the Input and Field typography scale
`required` boolean appends a `*` indicator with its own `.label__required` styling hook
`forId` prop sets the `for` attribute, so click-to-focus works as a wider tap target on mobile
Reads `<LField>` `disabled` and `invalid` state, adding `label--disabled` and `label--invalid` modifier classes
Renders a semantic `<label>`, so screen readers announce the association automatically
Used inside `<LField>` for most forms; reach for it directly when labelling custom composite controls

API Reference

Prop	Default	Type
`required`	`false`	`boolean` Whether the label's corresponding input is required or not.
`disabled`		`boolean`
`invalid`		`boolean`
`size`	`s`	`"s" \| "m"` The label's font size.
`forId`		`string` The id of the element that the label is for.

Slot	Type
`default`	`any`

Edit this pageorReport an issue

Input

Styled text field with optional icon or button addons and Field integration for labels and errors.

Explicit-click pagination control that pairs a Load More button with a loaded-vs-total progress indicator and a back-to-top link.