Input Field

A text input component with support for icons, prefix/suffix, chips, and size variants.

Anatomy

Import and assemble the component:

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

3<InputField placeholder="Enter text" />

For labels, helper text, and error messages, wrap with Field:

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

3<Field label="Email" helperText="We won't share it" error={errors.email?.message}>
4  <InputField placeholder="Enter email" />
5</Field>

API Reference

Renders a text input control. For label, helper text, and error support, use with Field.

Prop

Type

Examples

Basic Input

A basic input field with a placeholder.

1<InputField placeholder="Enter text" width="560px" />

With Field

Use Field to add label, helper text, and error handling.

1<Flex direction="column" gap="medium" style={{ width: 560 }}>
2  <Field label="Email" required helperText="We won't share your email">
3    <InputField type="email" placeholder="Enter email" />
4  </Field>
5  <Field label="Name" error="This field is required">
6    <InputField placeholder="Enter name" />
7  </Field>
8  <Field label="Phone" optional>
9    <InputField type="tel" placeholder="Enter phone" />
10  </Field>
11</Flex>

With Prefix/Suffix

Input field with prefix and suffix text.

1<InputField placeholder="0.00" prefix="$" suffix="USD" width="560px" />

With Icons

Input field with leading and trailing icons.

1<InputField
2  placeholder="Enter text"
3  leadingIcon={<Home size={16} />}
4  trailingIcon={<Info size={16} />}
5  width="560px"
6/>

Disabled State

Input field in disabled state.

1<InputField placeholder="Enter text" disabled width="560px" />

Custom Width

Input field with custom width.

1<InputField 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 placeholder="32px height (default)" />
3  <InputField 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    placeholder="Type and press Enter..."
4    chips={[
5      { label: "A", onRemove: () => console.log("Remove A") },
6      { label: "B", onRemove: () => console.log("Remove B") },
7    ]}
8  />
9  <InputField
10    placeholder="Type and press Enter..."
11    size="small"
12    chips={[
13      { label: "A", onRemove: () => console.log("Remove A") },
14      { label: "B", onRemove: () => console.log("Remove B") },
15    ]}

Accessibility

  • Use with Field for automatic label association and error linking
  • Required state is communicated via aria-required
  • Supports all native <input> attributes