Component

Input

A styled text input with size variants and validation states. Uses the headless @refraction-ui/input core.

Sizes

Three size options to fit different layout needs.

Small

Compact size for dense layouts and inline forms.

Default

Standard size for most form contexts.

Large

Larger touch target for primary actions or hero inputs.

Installation

$pnpm add @refraction-ui/react-input

Usage

tsx

import { Input } from '@refraction-ui/react'

export function MyForm() {
  return (
    <form className="space-y-4">
      <Input placeholder="Your name" />
      <Input type="email" placeholder="Email address" />
      <Input type="password" placeholder="Password" />
    </form>
  )
}

Input Types

Supports standard HTML input types with appropriate behavior.

Text

Password

Number

URL

Phone

States

Disabled, read-only, required, and invalid states.

Disabled

Prevents user interaction entirely.

Read-only

Visible and selectable but not editable.

Required

Browser enforces completion on form submit.

Invalid

This field has a validation error.

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size of the input.
`type`	`'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'`	`'text'`	HTML input type.
`disabled`	`boolean`	`false`	Disables the input.
`readOnly`	`boolean`	`false`	Makes the input read-only.
`required`	`boolean`	`false`	Marks the input as required.
`aria-invalid`	`boolean`	--	Marks the input as invalid for validation feedback.
`placeholder`	`string`	--	Placeholder text.
`className`	`string`	--	Additional CSS classes to apply.