Input

A styled text input built on Base UI’s Input primitive. Supports start/end adornments, a clear button, and error states via data-[invalid].

Import


import { Input } from 'chunks-ui'

Basic Usage


<Input placeholder="Enter your name" />

Adornments

Use startAdornment and endAdornment to place icons or text at the edges of the input:


<Input startAdornment={<SearchIcon className="size-4" />} placeholder="Search..." />


<Input endAdornment={<span className="text-xs text-muted-foreground">USD</span>} placeholder="0.00" />

USD

Clear Button

Pass an onClear callback to show a built-in clear button (uses the ClearButton component internally):


export const InputWithClearButton = () => {
  const [value, setValue] = useState('')
 
  return (
    <Input
      value={value}
      onChange={e => setValue(e.target.value)}
      onClear={() => setValue('')}
      placeholder="Search..."
    />
  )
}

Error State

The input styles change when the data-invalid attribute is present (set automatically by Field.Root with invalid prop, or manually):


<Field.Root invalid>
  <Field.Label>Email</Field.Label>
  <Input placeholder="user@example.com" />
  <Field.Error>Invalid email address</Field.Error>
</Field.Root>

With Field

Wrap Input in a Field for labels, descriptions, and validation:


<Field.Root>
  <Field.Label>Username</Field.Label>
  <Field.Description>Choose a unique username</Field.Description>
  <Input placeholder="johndoe" />
</Field.Root>

Username

Choose a unique username

Props

Prop	Type	Default	Description
`startAdornment`	`ReactNode`	—	Element before the input text
`endAdornment`	`ReactNode`	—	Element after the input text
`onClear`	`() => void`	—	Show clear button; called on click
`className`	`string`	—	Additional CSS classes

All other props are forwarded to the underlying Base UI Input (supports value, onChange, placeholder, disabled, etc.).