Input Field

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

Usage

1import { InputField } from "@raystack/apsara";

InputField Props

Prop

Type

Examples

Basic Input

A basic input field with a label and placeholder.

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

With Helper Text

Input field with additional helper text below.

1<InputField
2  label="With label"
3  placeholder="Enter text"
4  helperText="This is a helper text"
5/>

With Error

Input field displaying an error state with error message.

1<InputField
2  label="With Error"
3  placeholder="Enter text"
4  error="This field is required"
5/>

With Prefix/Suffix

Input field with prefix and suffix text.

1<InputField
2  label="With Prefix/Suffix"
3  placeholder="0.00"
4  prefix="$"
5  suffix="USD"
6/>

With Icons

Input field with leading and trailing icons.

1<InputField
2  label="With Icons"
3  placeholder="Enter text"
4  leadingIcon={<Home size={16} />}
5  trailingIcon={<Info size={16} />}
6/>

Optional Field

Input field marked as optional.

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

Disabled State

Input field in disabled state.

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

Custom Width

Input field with custom width.

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

Size Variants

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

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

With Chips

Input field that can display and manage chips/tags.

1<Flex direction="column" gap="medium">
2  <InputField
3    label="Large Input with Chips"
4    placeholder="Type and press Enter..."
5    chips={[
6      { label: "A", onRemove: () => console.log("Remove A") },
7      { label: "B", onRemove: () => console.log("Remove B") },
8    ]}
9  />
10  <InputField
11    label="Small Input with Chips"
12    placeholder="Type and press Enter..."
13    size="small"
14    chips={[
15      { label: "A", onRemove: () => console.log("Remove A") },
16      { label: "B", onRemove: () => console.log("Remove B") },
17    ]}
18  />
19</Flex>