Klarhimmel UI
Klarhimmel ↗

Input

Stable

A single-line text field with the system's border, focus ring and invalid state.

npx shadcn add @klarhimmel/input

When to use

  • Use for

    Short free text: a name, an email, a search.

  • Not for

    Long answers. Use Textarea.

  • Pairs with

    Always inside a Field.

Preview

We only use it to reply.

input.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="Email" hint="We reply within a day.">
        {(p) => <Input type="email" {...p} />}
      </Field>
    </Theme>
  );
}

Install

Import

import { Input } 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
...inputInputHTMLAttributes-Every native input attribute is passed through.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabMoves into and out of the field
Accessibility