Input field

The InputField component provides a comprehensive text input solution with built-in support for labels, helper text, validation errors, icons, and chip tags.

Basic usage

import { InputField } from '@raystack/apsara';

function App() {
  return <InputField label="Email" placeholder="Enter your email" />;
}

Props

string

The label text displayed above the input field.

string

Helper text displayed below the input field.

string

Error message to display. When provided, the input shows an error state.

boolean

Whether the input is disabled.

ReactNode

Icon element to display at the start of the input.

ReactNode

Icon element to display at the end of the input.

boolean

When true, displays “(optional)” text next to the label.

string

Text prefix to display before the input value.

string

Text suffix to display after the input value.

string | number

Width of the input container.

Array<{ label: string; onRemove?: () => void }>

Array of chip objects to display inside the input field.

number

default:"2"

Maximum number of chips to display before showing overflow count.

Tooltip text to display next to the label.

'default' | 'borderless'

default:"'default'"

The visual variant of the input field.

'small' | 'large'

default:"'large'"

The size of the input field.

RefObject<HTMLDivElement | null>

Ref to the input wrapper container element.

string

Additional CSS classes to apply to the input element.

With label and helper text

<InputField
  label="Username"
  helperText="Choose a unique username"
  placeholder="Enter username"
/>

Optional field

<InputField label="Middle name" optional placeholder="Enter middle name" />

With validation error

<InputField
  label="Email"
  error="Please enter a valid email address"
  value="invalid-email"
/>

With icons

import { MagnifyingGlassIcon, CheckIcon } from '@radix-ui/react-icons';

<InputField
  label="Search"
  leadingIcon={<MagnifyingGlassIcon />}
  placeholder="Search..."
/>

<InputField
  label="Verified email"
  trailingIcon={<CheckIcon />}
  value="user@example.com"
/>

With prefix and suffix

<InputField label="Price" prefix="$" placeholder="0.00" />

<InputField label="Website" suffix=".com" placeholder="yoursite" />

With chips

const [chips, setChips] = useState([
  { label: 'React', onRemove: () => removeChip('React') },
  { label: 'TypeScript', onRemove: () => removeChip('TypeScript') },
  { label: 'Node.js', onRemove: () => removeChip('Node.js') }
]);

<InputField
  label="Technologies"
  chips={chips}
  maxChipsVisible={2}
  placeholder="Add more..."
/>

<InputField
  label="API Key"
  infoTooltip="You can find your API key in the settings page"
  placeholder="Enter API key"
/>

Size variants

<InputField size="small" placeholder="Small input" />
<InputField size="large" placeholder="Large input" />

Borderless variant

<InputField variant="borderless" placeholder="Borderless input" />

Disabled state

<InputField label="Username" value="john_doe" disabled />

Custom width

<InputField label="Code" width="150px" placeholder="Enter code" />

Accessibility

The input field includes proper aria-invalid attribute when in error state.
Labels are properly associated with their input elements.
Helper text and error messages are announced to screen readers.
The info tooltip icon has appropriate keyboard navigation support.

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Basic usage

Props

With label and helper text

Optional field

With validation error

With icons

With prefix and suffix

With chips

With info tooltip

Size variants

Borderless variant

Disabled state

Custom width

Accessibility

​Basic usage

​Props

​With label and helper text

​Optional field

​With validation error

​With icons

​With prefix and suffix

​With chips

​With info tooltip

​Size variants

​Borderless variant

​Disabled state

​Custom width

​Accessibility

Basic usage

Props

With label and helper text

Optional field

With validation error

With icons

With prefix and suffix

With chips

With info tooltip

Size variants

Borderless variant

Disabled state

Custom width

Accessibility