> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Input
> A single-line text field for user data entry — supports labels, icons, helper text, and four validation states.
## Overview
[you@example.com](mailto:you@example.com)
Default
[you@email.com](mailto:you@email.com)
Focus
invalid-email
⚠ Enter a valid email
ahmad.dani
✓ Username available
The **Input** component is the foundational form element for capturing single-line text. It supports labels, placeholder text, leading/trailing icons, helper text, and four validation states.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { Input } from "@araf-ds/core"
export default function Example() {
return (
)
}
```
***
## Variants
### Default
The standard input with a label above and optional placeholder.
[you@example.com](mailto:you@example.com)
```tsx theme={null}
```
### With Helper Text
••••••••
Must be at least 8 characters
```tsx theme={null}
```
### Required Field
Enter your full name
```tsx theme={null}
```
### With Leading Icon
Search anything...
```tsx theme={null}
}
/>
```
***
## States
Default
Default
Focused
Focus
Error value
⚠ Error message
Valid value
✓ Looks good
Disabled
Disabled
| State | Border | Ring | Helper text color |
| -------- | --------- | ------------- | ----------------- |
| Default | `#D0D5DD` | — | `#667085` |
| Focus | `#0479CE` | `#CDE4F5` 4px | — |
| Error | `#DC2626` | — | `#B42318` |
| Success | `#039855` | — | `#027A48` |
| Disabled | `#E5E7EB` | — | — |
```tsx theme={null}
```
Avoid hiding inputs when they are unavailable. Use the `disabled` prop so users can still see the field exists.
***
## API Reference
HTML input type. Values: `text` · `email` · `password` · `number` · `search` · `tel` · `url`
Label displayed above the input field.
Placeholder text shown when the field is empty.
Helper or error message displayed below the input.
Validation state. Values: `default` · `error` · `success` · `disabled`
Icon rendered inside the input on the left side.
Icon rendered inside the input on the right side.
Marks the label with a required asterisk indicator.
Disables the input and applies the disabled visual style.
Controlled value of the input.
Change event handler.
Additional Tailwind classes for custom overrides.
***
## Accessibility
* Input uses native `` element with semantic `