Klarhimmel UI
Klarhimmel ↗

Label

Stable

The visible text that names a form control.

npx shadcn add @klarhimmel/label @klarhimmel/input

When to use

  • Use for

    The visible name of a form control you lay out yourself.

  • Not for

    A heading, or a hint under a field. Use Field for the whole stack.

  • Pairs with

    Input, Textarea, Checkbox, Select.

Preview

label.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Input } from '@/components/klarhimmel/ui/input';
import { Label } from '@/components/klarhimmel/ui/label';

export default function Example() {
  return (
    <Theme theme="brand">
      <Label htmlFor="email" required>Email address</Label>
      <Input id="email" type="email" required />
    </Theme>
  );
}

Install

Import

import { Label } from '@/components/klarhimmel/ui/label';
Lands in
components/klarhimmel/ui/label.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • Required

    import { Checkbox } from '@/components/klarhimmel/ui/checkbox';
import { Input } from '@/components/klarhimmel/ui/input';
import { Label } from '@/components/klarhimmel/ui/label';

export default function LabelRequired() {
  return (
    <div className="flex w-[min(24rem,calc(100cqw-3rem))] flex-col gap-4">
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="label-req-name" required>Guest name</Label>
        <Input id="label-req-name" required />
      </div>
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="label-req-off">Company (optional)</Label>
        <Input id="label-req-off" disabled defaultValue="Locked while booking as a guest" />
      </div>
      <Checkbox label="I have read the house rules" />
    </div>
  );
}

  • Form

    Fields marked with * are required.

    import { Input } from '@/components/klarhimmel/ui/input';
import { Label } from '@/components/klarhimmel/ui/label';

export default function LabelForm() {
  return (
    <form className="flex w-[min(24rem,calc(100cqw-3rem))] flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
      <p className="text-kh-small text-kh-muted">Fields marked with * are required.</p>
      <div className="flex flex-col gap-1.5"><Label htmlFor="lf-first" required>First name</Label><Input id="lf-first" required autoComplete="given-name" /></div>
      <div className="flex flex-col gap-1.5"><Label htmlFor="lf-last" required>Last name</Label><Input id="lf-last" required autoComplete="family-name" /></div>
      <div className="flex flex-col gap-1.5"><Label htmlFor="lf-phone">Phone</Label><Input id="lf-phone" type="tel" autoComplete="tel" /></div>
    </form>
  );
}

API reference

PropTypeDefaultDescription
htmlForstring-The id of the control it names.
requiredbooleanfalseAdds a visible asterisk and "(required)" for screen readers. Set required on the control too.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
ClickFocuses the control it names

A label must be connected with htmlFor, or wrap the control.

Accessibility