Label

Form-control label rendered as a native <label>; supports required indicator and disabled colouring.

stable
since v0.1.0
0.57 kB
forms

Preview

tsx

import { Input, Label } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem', width: '260px' }}>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

Required indicator

Set required to append a decorative red asterisk after the label text. The asterisk is aria-hidden; pair with required on the input for assistive tech.

Preview

Open

tsx

import { Input, Label } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem', width: '260px' }}>
      <Label htmlFor="username" required>
        Username
      </Label>
      <Input id="username" required placeholder="ada-lovelace" />
    </div>
  );
}

Disabled

Set disabled to render the label in the disabled colour. Use this when the associated control is disabled.

Preview

Open

tsx

import { Input, Label } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem', width: '260px' }}>
      <Label htmlFor="locked" disabled>
        Account ID
      </Label>
      <Input id="locked" disabled defaultValue="usr_9f2c4" />
    </div>
  );
}

With a form control

A Label, Input, and helper text laid out as a typical field.

Preview

Open

tsx

import { HelperText, Input, Label } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem', width: '320px' }}>
      <Label htmlFor="handle" required>
        Handle
      </Label>
      <Input id="handle" placeholder="@arshad" aria-describedby="handle-help" />
      <HelperText id="handle-help">Letters, numbers, and underscores only.</HelperText>
    </div>
  );
}

API

PropTypeDefaultDescription

required

boolean

—

Appends a red `*` after the label text. Purely decorative (`aria-hidden`).

disabled

boolean

—

Renders in the disabled colour.

className

string

—

style

CSSProperties

—

Accessibility

Renders a native <label> element; inherits all built-in semantics.
Use htmlFor to associate the label with its control by id.
Clicking the label transfers focus to the associated form field.
The required indicator is purely visual (aria-hidden); mirror the state on the input.

Recipes

Pair every input, select, or textarea with a Label for screen-reader users.
Use a visually hidden label when the visual design omits a caption.
When using Fieldset for a group, prefer its legend over a free-standing Label.