Klarhimmel UI
Klarhimmel ↗

File field

Stable

A styled file picker: label, button, the chosen names, and a hint or an error. The native input stays in the form.

npx shadcn add @klarhimmel/file-field

When to use

  • Use for

    A form that takes an upload: logo, CV, photos.

  • Not for

    Drag-and-drop galleries or large uploads with progress.

  • Pairs with

    Field-style forms, Banner for a failed upload.

Preview

No file chosen

PDF, up to 2 MB each.

file-field.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { FileField } from '@/components/klarhimmel/ui/file-field';

export default function Example() {
  return (
    <Theme theme="brand">
      <FileField label="Logo" accept="image/png,image/svg+xml" hint="PNG or SVG, up to 2 MB." onFiles={(files) => console.log(files)} />
    </Theme>
  );
}

Install

Import

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

  • Basic

    No file chosen

    PNG or SVG, up to 2 MB.

    No file chosen

    Pick as many as you like.

    import { FileField } from '@/components/klarhimmel/ui/file-field';

export default function FileFieldBasic() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <FileField label="Logo" accept="image/png,image/svg+xml" hint="PNG or SVG, up to 2 MB." />
      <FileField label="Room photos" multiple accept="image/*" hint="Pick as many as you like." />
    </div>
  );
}

  • Error

    No file chosen

    The file is larger than 2 MB. Choose a smaller PDF.

    No file chosen

    Uploads are locked while the booking is confirmed.

    import { FileField } from '@/components/klarhimmel/ui/file-field';

export default function FileFieldError() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <FileField label="Price list" accept="application/pdf" error="The file is larger than 2 MB. Choose a smaller PDF." />
      <FileField label="Contract" disabled hint="Uploads are locked while the booking is confirmed." />
    </div>
  );
}

API reference

PropTypeDefaultDescription
labelstring-Required. The visible label and the button's name.
hint / errorReactNode-Help text; an error replaces it and is read as the description.
accept / multiplestring / boolean-Passed to the native input.
namestring-Form field name, so a surrounding form submits the files.
onFiles(files: File[]) => void-Called with the chosen files.
buttonLabel / emptyLabelstring'Choose file' / 'No file chosen'Pass these translated.
disabledbooleanfalsePrevents interaction.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
Enter / SpaceOpens the file picker
TabMoves focus

The chosen names are announced when they change.

Accessibility