Primitives

Input · Field

40px tall (36px in C). Hairline border. Focus = accent border + 14% accent halo. Icon on the left, suffix on the right.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

Full name

As it appears on invoices.

Domain looks incomplete.

Hourly budget

€/h

Net, EUR.

Engagement type

With keyboard hint

⌘K

Project brief

Markdown supported.

import { Field, Input, Textarea, Select } from "@/components/br/primitives";
import { Mail } from "@/components/br/icons";

<Field label="Email" error="Domain looks incomplete.">
  <Input
    icon={<Mail size={14} />}
    placeholder="you@studio.co"
    defaultValue="hello@"
  />
</Field>

<Field label="Hourly budget" hint="Net, EUR.">
  <Input defaultValue="120" suffix="€/h" />
</Field>

Props

Prop	Type	Default	Description
label	ReactNode	—	Eyebrow-style label above the input.
hint	ReactNode	—	Helper text below (subtle).
error	ReactNode	—	Error text below (accent). Replaces hint when present.
icon	ReactNode (Input only)	—	Left icon inside the input.
suffix	ReactNode (Input only)	—	Right affix — kbd hint, unit, etc.