Input

A text field with a calm focus ring, three sizes and an input group for icons, prefixes and shortcuts.

Inputs

Playground

Tweak the props, the preview and the code follow.

Props

size

type

placeholder

icon

invalid

disabled

<Input placeholder="you@company.com" />

npx @plumsydev/plum-ui add input

Also pulls in kbd automatically.

import { Input, InputAddon, InputGroup } from "@/components/ui/input"

<InputGroup>
  <InputAddon><Search /></InputAddon>
  <Input placeholder="Search…" />
</InputGroup>

Wrap an Input in InputGroup and add InputAddons. The ring moves to the group and icons light up on focus.

⌘K

https://

.infraflow.app

Invalid, disabled and file inputs.

Extends the native input element.

Prop	Type	Default
`size` Height and padding.	`"sm" \| "default" \| "lg"`	`"default"`
`aria-invalid` Shows the destructive border and ring.	`boolean`	`—`

A div that hosts the focus ring and lays out addons around the input.

Prop	Type	Default
`align` Which side of the input the addon sits on.	`"start" \| "end"`	`"start"`