Component

Input

Backed by @base-ui/react/input. Anatomy is fixed: a single root part. Base UI reference.

Install

npx bambiui add input

Import from your own project source, never from Base UI directly, and never from a published bambiui package:

import { Input } from "@/components/ui/input";

Sizes

States

Hover, active, and focus-visible are styled but cannot be shown statically. Use the component with a mouse or keyboard to verify those interaction states.

Supported states: `default`, `hover`, `focus-visible`, `invalid`, `read-only`, `disabled`.

Props

Prop	Type	Default
`size`	"sm" \| "md" \| "lg"	`"md"`
`onValueChange`	(value: string, details: Input.ChangeEventDetails) => void	`undefined`
`readOnly`	boolean	`false`
`disabled`	boolean	`false`

Native props and refs supported by the underlying Base UI primitive are preserved.

Tokens

Override any of these in your theme CSS to restyle Input:

--bambi-control-height-sm
--bambi-control-height-md
--bambi-control-height-lg
--bambi-control-padding-x
--bambi-control-radius
--bambi-control-background
--bambi-control-foreground
--bambi-control-border
--bambi-control-border-invalid
--bambi-control-placeholder
--bambi-control-readonly-background