Forms

Input

A themed single-line text input. Thin wrapper over the native input with tokenised styling, focus ring, and aria-invalid handling.

Source

Preview

GitHub

import { Input } from '@brika/clay/components/input';

/** Single-line text input in its default state. */
export default function InputDefaultDemo() {
  return <Input placeholder="Type something…" />;
}

01 Installation

Install

Pull Input from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Input } from "@brika/clay";

tsxGranular1 line

import { Input } from "@brika/clay/components/input";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxInput.tsx6 lines

import { Input } from '@brika/clay/components/input';

/** Single-line text input in its default state. */
export default function InputDefaultDemo() {
  return <Input placeholder="Type something…" />;
}

03 Examples

Input, every way

Disabled

Disabled input, blocks interaction and reduces opacity.

GitHub

import { Input } from '@brika/clay/components/input';

/** Disabled input, blocks interaction and reduces opacity. */
export default function InputDisabledDemo() {
  return <Input disabled placeholder="Not editable" className="max-w-xs" />;
}

File

File picker using the native file input type.

GitHub

import { Input } from '@brika/clay/components/input';

/** File picker using the native file input type. */
export default function InputFileDemo() {
  return <Input type="file" className="max-w-xs" />;
}

Invalid

Validation error state, set aria-invalid to trigger the destructive border.

GitHub

import { Input } from '@brika/clay/components/input';

/** Validation error state, set aria-invalid to trigger the destructive border. */
export default function InputInvalidDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1">
      <Input aria-invalid="true" defaultValue="jane@" />
      <p className="text-destructive text-xs">Enter a valid email address.</p>
    </div>
  );
}

Readonly

Read-only input, focusable but not editable, useful for copy-able values.

GitHub

import { Input } from '@brika/clay/components/input';

/** Read-only input, focusable but not editable, useful for copy-able values. */
export default function InputReadonlyDemo() {
  return <Input readOnly defaultValue="sk-live-xK9…mQ2" className="max-w-xs font-mono text-sm" />;
}

Types

Native input types, email, number, and search all pass through unchanged.

GitHub

import { Input } from '@brika/clay/components/input';

/** Native input types, email, number, and search all pass through unchanged. */
export default function InputTypesDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Input type="email" placeholder="you@example.com" />
      <Input type="number" placeholder="42" />
      <Input type="search" placeholder="Search…" />
    </div>
  );
}

04 Accessibility

Accessibility

Always pair with a <Label> via matching id / htmlFor, never rely on placeholder as a label.
aria-invalid="true" applies the destructive ring; pair with a visible error message linked via aria-describedby.
Disabled inputs are removed from the tab order; use readOnly when the content must stay focusable.
File inputs announce "Browse…" or similar on activation, ensure the label describes what to select.

05 Tokens 24 theme-overridable

Theme tokens

Every CSS variable Input reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Input without touching component code.

Input tokens

24 tokens

ColorFill, border, and text colors.8

--input-containercolorvar(--background)
components.input.container
Input background.
--input-labelcolorvar(--foreground)
components.input.label
Input text color.
--input-bordercolorvar(--input)
components.input.border
Input border color.
--input-placeholdercolorvar(--muted-foreground)
components.input.placeholder
Input placeholder text color.
--input-invalid-bordercolorvar(--destructive)
components.input.invalidBorder
Border color drawn when the input is in an invalid state (`aria-invalid=true`).
--input-selection-containercolorvar(--primary)
components.input.selectionContainer
Background color of selected text inside the input.
--input-selection-labelcolorvar(--primary-foreground)
components.input.selectionLabel
Foreground color of selected text inside the input.
--input-file-labelcolorvar(--foreground)
components.input.fileLabel
Foreground color of the inline file picker button rendered for `type="file"` inputs.

GeometrySizes, lengths, and corner radii.5

--input-radiusradiusvar(--radius-control)
components.input.radius
Input corner radius.
--input-heightsize2.25rem
components.input.height
Default input height.
--input-padding-xsizecalc(var(--spacing) * 3)
components.input.paddingX
Inline padding inside the input.
--input-padding-ysizecalc(var(--spacing) * 2)
components.input.paddingY
Block padding inside the input.
--input-gapsizecalc(var(--spacing) * 2)
components.input.gap
Gap between adjacent children inside the input.

BorderBorder width and style.2

--input-border-widthborder-width1px
components.input.borderWidth
Border width on the input. Set non-zero for outline-style variants.
--input-border-styleborder-stylesolid
components.input.borderStyle
Border style on the input (`solid`, `dashed`, `double`, `none`).

TypographyTypeface, size, weight, spacing.6

--input-font-familyfont-familyvar(--font-sans)
components.input.fontFamily
Typeface for input.
--input-font-sizefont-sizevar(--text-body-md)
components.input.fontSize
Font size for input.
--input-font-weightfont-weight500
components.input.fontWeight
Font weight for input.
--input-line-heightline-height1.25
components.input.lineHeight
Line height for input.
--input-letter-spacingletter-spacing0
components.input.letterSpacing
Letter spacing for input. Useful for caps labels.
--input-text-transformtext-transformnone
components.input.textTransform
Text transform for input (`uppercase`, `lowercase`, `capitalize`, `none`).

ElevationDrop shadow and depth.1

--input-backdrop-blurblur0px
components.input.backdropBlur
Backdrop blur applied to the input surface. Set non-zero for a frosted-glass treatment.

MotionAnimation duration and easing.2

--input-durationdurationvar(--motion-standard-duration)
components.input.duration
Transition duration for input state changes.
--input-easingeasingvar(--motion-standard-easing)
components.input.easing
Transition easing for input state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.input, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "input": {
      "paddingX": "calc(var(--spacing) * 3)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-input-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Input. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

No wrapper-specific props, all attributes pass through to the underlying primitive.