Klarhimmel UI
Klarhimmel ↗

Field

Stable

Label, control and a hint or error, with the ids wired for assistive tech.

npx shadcn add @klarhimmel/input

When to use

  • Use for

    Around every form control: it owns the label, the hint and the error.

  • Not for

    Grouping several controls. Use a fieldset.

  • Pairs with

    Input, Textarea, Switch.

Preview

We only use it to reply.

field.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Input, Field } from '@/components/klarhimmel/ui/input';

export default function Example() {
  return (
    <Theme theme="brand">
      <Field label="Company" error="Enter the company name.">
        {(p) => <Input {...p} />}
      </Field>
    </Theme>
  );
}

Install

Import

import { Field } from '@/components/klarhimmel/ui/input';
Lands in
components/klarhimmel/ui/input.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.

API reference

PropTypeDefaultDescription
labelReactNode-Required. The visible label.
hintReactNode-Help text under the control.
errorReactNode-Error text; replaces the hint and marks the control invalid.
children(p: { id, aria-describedby?, aria-invalid? }) => ReactNode-Render prop: spread p onto the control.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabMoves to the control; the label is read with it
Screen readerReads label, hint and error together

Field wires the label, hint and error to the control with htmlFor and aria-describedby.

Accessibility