Label

The Label component provides accessible labels for form inputs with optional required indicator.

Preview

Field label

Required field

Import

import { Label } from 'meridian';

Props

Prop	Type	Default	Description
required	boolean	—	Whether the associated field is required

Usage

Basic

<Label htmlFor="my-input">Field name</Label>
<Input id="my-input" />

Required Fields

Use the required prop to show a required indicator:

<Label htmlFor="required-field" required>Email address</Label>
<Input id="required-field" type="email" />

Required Indicator

Email address

With Checkbox

<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

With Checkbox

Accept terms and conditions

With Switch

<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

With Switch

Enable notifications