Skip to main content
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

​
label
string
The label text displayed above the input field.
​
helperText
string
Helper text displayed below the input field.
​
error
string
Error message to display. When provided, the input shows an error state.
​
disabled
boolean
Whether the input is disabled.
​
leadingIcon
ReactNode
Icon element to display at the start of the input.
​
trailingIcon
ReactNode
Icon element to display at the end of the input.
​
optional
boolean
When true, displays “(optional)” text next to the label.
​
prefix
string
Text prefix to display before the input value.
​
suffix
string
Text suffix to display after the input value.
​
width
string | number
Width of the input container.
​
chips
Array<{ label: string; onRemove?: () => void }>
Array of chip objects to display inside the input field.
​
maxChipsVisible
number
default:"2"
Maximum number of chips to display before showing overflow count.
​
infoTooltip
string
Tooltip text to display next to the label.
​
variant
'default' | 'borderless'
default:"'default'"
The visual variant of the input field.
​
size
'small' | 'large'
default:"'large'"
The size of the input field.
​
containerRef
RefObject<HTMLDivElement | null>
Ref to the input wrapper container element.
​
className
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="[email protected]"
/>

​
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..."
/>

​
With info tooltip

<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.