Form

Label

Form label component with optional required indicator, linked to a control for accessibility.

Overview

The Label component displays a form label (and optional required indicator) associated with a control. It ensures the label is linked for accessibility and supports different sizes for compact and standard layouts.

Key Business & UX Benefits

Accessible label-to-control association for screen readers and click-to-focus.
Required indicator makes mandatory fields clear without extra markup.
Size variants fit compact and standard form layouts.
Consistent styling with Field and other form components.

Pro-Tip from Larry: Use Label with every form control so the label is always associated for accessibility.

Usage

Different sizes

Label Small

<Label />

Label Medium

<Label size="medium" />

With required mark

Label Small Required

<Label isRequired />

Label Medium Required

<Label size="medium" isRequired />

Feature List

Form label with accessible association to control
Required indicator support
Small and medium size variants
Consistent styling with Field and form components

API Reference

Prop	Default	Type
`isRequired`	`false`	`boolean` Whether the label's corresponding input is required or not.
`disabled`		`boolean`
`error`		`boolean`
`size`	`small`	`"small" \| "medium"` 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

Search Input

A search input component for site navigation enabling real-time product discovery with auto-suggestions across all devices.

Pagination component combining infinite scroll with Load More button.