codefast/ui

Command Palette

Search for a command to run...

Source
Form

Label

Accessible form label that forwards htmlFor. Pairs with any form control.

Examples

Label in Field

Inside a form, use FieldLabel from the Field component for built-in description and error wiring.

We’ll only use this to send you receipts.

18 lines
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@codefast/ui/field";
import { Input } from "@codefast/ui/input";

export function LabelInField() {
  return (
    <FieldGroup className="mx-auto w-full max-w-sm">
      <Field>
        <FieldLabel htmlFor="label-field-name">Full name</FieldLabel>
        <Input id="label-field-name" placeholder="Ada Lovelace" />
      </Field>
      <Field>
        <FieldLabel htmlFor="label-field-email">Email address</FieldLabel>
        <Input id="label-field-email" placeholder="you@example.com" type="email" />
        <FieldDescription>We’ll only use this to send you receipts.</FieldDescription>
      </Field>
    </FieldGroup>
  );
}

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

39 lines
import { Checkbox } from "@codefast/ui/checkbox";
import { Label } from "@codefast/ui/label";

import type { Translations } from "#/features/components-catalog/components/detail/language";
import { useTranslation } from "#/features/components-catalog/components/detail/language-context";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Accept terms and conditions",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "قبول الشروط والأحكام",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "קבל תנאים והגבלות",
    },
  },
};

export function LabelRtl() {
  const { dir, t } = useTranslation(translations, "ar");

  return (
    <div className="flex gap-2" dir={dir}>
      <Checkbox id="terms-rtl" dir={dir} />
      <Label htmlFor="terms-rtl" dir={dir}>
        {t.label}
      </Label>
    </div>
  );
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Label

Features

  • Forwards htmlFor — clicking the label focuses or activates the control it names.
  • Dims and (on aria-invalid) recolors automatically via peer-*/group-data-disabled: selectors — but only when the paired control comes before it in the DOM, e.g. <Checkbox /><Label>, not <Label><Input /></Label>.

API reference

Props for each part of the component. All native element props are also forwarded.

Label

An accessible form label that forwards htmlFor.

htmlForstring

The id of the control this label names. Clicking focuses that control.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

  • Match htmlFor to the control’s id so clicking the label activates it.
  • Every interactive control should have a Label, even if visually hidden.
  • Automatic disabled/invalid dimming needs the control before the label in markup — reorder or dim it yourself otherwise.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Give every input, checkbox, and switch a Label.
  • Keep labels short and in sentence case.

Don’t

  • Don’t replace a label with placeholder text.
  • Don’t leave a control unlabelled and rely on nearby text alone.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting StartedBrowse all components