Skip to main content

​
Overview

Default
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

npm install @araf-ds/core

​
Usage

import { Input } from "@araf-ds/core"

export default function Example() {
  return (
    <Input
      label="Email address"
      placeholder="[email protected]"
      type="email"
    />
  )
}

​
Variants

​
Default

The standard input with a label above and optional placeholder. 
<Input label="Email address" placeholder="[email protected]" type="email" />

​
With Helper Text

••••••••
Must be at least 8 characters
<Input
  label="Password"
  type="password"
  helperText="Must be at least 8 characters"
/>

​
Required Field

Enter your full name
<Input label="Full name" required placeholder="Enter your full name" />

​
With Leading Icon

Search anything…
<Input
  label="Search"
  placeholder="Search anything..."
  leadingIcon={<SearchIcon size={16} />}
/>

​
States

Default
Default
Focused
Focus
Error value
⚠ Error message
Valid value
✓ Looks good
Disabled
Disabled
StateBorderRingHelper text color
Default#D0D5DD—#667085
Focus#0479CE#CDE4F5 4px—
Error#DC2626—#B42318
Success#039855—#027A48
Disabled#E5E7EB——
<Input state="default" />
<Input state="error" helperText="Please enter a valid email" />
<Input state="success" helperText="Username available" />
<Input disabled value="Read-only value" />
Avoid hiding inputs when they are unavailable. Use the disabled prop so users can still see the field exists.

​
API Reference

​
type
string
default:"text"
HTML input type. Values: text · email · password · number · search · tel · url
​
label
string
Label displayed above the input field.
​
placeholder
string
Placeholder text shown when the field is empty.
​
helperText
string
Helper or error message displayed below the input.
​
state
string
default:"default"
Validation state. Values: default · error · success · disabled
​
leadingIcon
ReactNode
Icon rendered inside the input on the left side.
​
trailingIcon
ReactNode
Icon rendered inside the input on the right side.
​
required
boolean
default:"false"
Marks the label with a required asterisk indicator.
​
disabled
boolean
default:"false"
Disables the input and applies the disabled visual style.
​
value
string
Controlled value of the input.
​
onChange
(e: ChangeEvent) => void
Change event handler.
​
className
string
Additional Tailwind classes for custom overrides.

​
Accessibility

  • Input uses native <input> element with semantic <label> association via id/htmlFor
  • Error messages are linked via aria-describedby so screen readers announce them
  • Required fields use the required HTML attribute in addition to the visual asterisk
  • disabled inputs carry the native disabled attribute — they are excluded from tab order
  • Focus ring (0 0 0 4px #CDE4F5) meets WCAG 2.1 AA contrast requirements

​
Do’s & Don’ts

Do

  • Always provide a visible label — never rely on placeholder alone
  • Use helperText to explain the expected format before the user submits
  • Use state="error" with a descriptive helperText for inline validation
  • Group related inputs inside a Form component for consistent spacing

Don't

  • Don’t use placeholder text as a substitute for a label
  • Don’t show error state until after the user has interacted with the field (avoid premature validation)
  • Don’t use custom border colors outside the design system states
  • Don’t disable inputs without explaining why — add a tooltip or helper text