Label

Use a label with every form control so its purpose is clear before interaction.

Email address (required)

Workshop code

Show codeCopy

Import

import { Label } from "@workshop1/ui/components/label"

Relationships

Set htmlFor on Label to the matching control id. The component keeps the native label semantics while adding the shared typography, spacing, and disabled styling.

Required and disabled controls

Use the control's native required attribute for validation and include required context in the visible label when your form needs it. Keep disabled controls and labels inside the same Field so the field can communicate the state consistently; do not rely on colour alone.

Accessibility

Match the label's htmlFor to the control's id so assistive technology can identify the relationship.

Best practices

• Prefer a visible label over placeholder-only instructions.
• Keep the label short and describe the value the control expects.
• Use aria-label only when a visible label cannot fit the compact UI.