Logoapsara
DocumentationExamples
Input FieldA text input component with support for labels, helper text, and various states.
Usage
Input Field component is used for collecting user input in forms and interfaces, with support for various states and decorative elements.
Installation
Install the component from your command line. 
npm install @raystack/apsara
Import all parts and piece them together. 
import { InputField } from '@raystack/apsara/v1'

<InputField label="Label" placeholder="Enter text" />
Props
The InputField component accepts the following props:
  • label: Text label above the input (string)
  • helperText: Helper text below the input (string)
  • error: Error message to display below the input (string)
  • disabled: Whether the input is disabled (boolean)
  • leadingIcon: Icon element to display at the start of input (ReactNode)
  • trailingIcon: Icon element to display at the end of input (ReactNode)
  • optional: Shows "(Optional)" text next to label (boolean)
  • prefix: Text or symbol to show before input value (string)
  • suffix: Text or symbol to show after input value (string)
  • width: Custom width for the input field (string | number)
  • className: Additional CSS class names
  • All other InputHTMLAttributes from React
Variants
Basic Input
A basic input field with a label and placeholder.
loading...
With Helper Text
Input field with additional helper text below.
loading...
With Error
Input field displaying an error state with error message.
loading...
With Prefix/Suffix
Input field with prefix and suffix text.
loading...
With Icons
Input field with leading and trailing icons.
loading...
Optional Field
Input field marked as optional.
loading...
Disabled State
Input field in disabled state.
loading...
Custom Width
Input field with custom width.
loading...