Input Field

A text input component with support for labels, helper text, and various states.

Usage

import { Indicator } from "@raystack/apsara/v1";
 
<Indicator variant="accent" label="New">
  <div>Content</div>
</Indicator>;

InputField Props

Prop	Type	Default
`size`	`"small" \| "large"`	`"large"`
`label`	`string`	-
`helperText`	`string`	-
`error`	`string`	-
`disabled`	`boolean`	-
`leadingIcon`	`ReactNode`	-
`trailingIcon`	`ReactNode`	-
`optional`	`boolean`	-
`prefix`	`string`	-
`suffix`	`string`	-
`width`	`string \| number`	-
`chips`	`{ label: string; onRemove: () => void; }[]`	-
`className`	`string`	-

Examples

Basic Input

A basic input field with a label and placeholder.

<InputField label="Default" placeholder="Enter text" />

With Helper Text

Input field with additional helper text below.

<InputField
  label="With label"
  placeholder="Enter text"
  helperText="This is a helper text"
/>

With Error

Input field displaying an error state with error message.

<InputField
  label="With Error"
  placeholder="Enter text"
  error="This field is required"
/>

With Prefix/Suffix

Input field with prefix and suffix text.

<InputField
  label="With Prefix/Suffix"
  placeholder="0.00"
  prefix="$"
  suffix="USD"
/>

With Icons

Input field with leading and trailing icons.

<InputField
  label="With Icons"
  placeholder="Enter text"
  leadingIcon={<Home size={16} />}
  trailingIcon={<Info size={16} />}
/>

Optional Field

Input field marked as optional.

<InputField label="Optional Field" placeholder="Enter text" optional />

Disabled State

Input field in disabled state.

<InputField label="Disabled" placeholder="Enter text" disabled />

Custom Width

Input field with custom width.

<InputField label="Custom Width" placeholder="Enter text" width="300px" />

Size Variants

InputField comes in two sizes: small (24px) and large (32px).

<Flex direction="column" gap="medium">
  <InputField label="Large Input (Default)" placeholder="32px height" />
  <InputField label="Small Input" placeholder="24px height" size="small" />
</Flex>

With Chips

Input field that can display and manage chips/tags.

<Flex direction="column" gap="medium">
  <InputField
    label="Large Input with Chips"
    placeholder="Type and press Enter..."
    chips={[
      { label: "A", onRemove: () => console.log("Remove A") },
      { label: "B", onRemove: () => console.log("Remove B") },
    ]}
  />
  <InputField
    label="Small Input with Chips"
    placeholder="Type and press Enter..."
    size="small"
    chips={[
      { label: "A", onRemove: () => console.log("Remove A") },
      { label: "B", onRemove: () => console.log("Remove B") },
    ]}
  />
</Flex>

Input Field

On this page