Components

Input

Single-line text input with error state and file input support.

Category: Form / Standalone

Import

import { Input } from "@hareru/ui"

Exports

NameTypeDescription
InputComponentMain input component
InputPropsTypeProps interface

Types

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: boolean
}

Key Props

PropTypeDefaultDescription
errorbooleanfalseApplies error styling (hui-input--error)
typestring—When "file", automatically adds hui-input--file class

Accessibility

  • Keyboard:
    • Standard text input keyboard interactions

Usage

import { Input } from "@hareru/ui"

// Basic usage
<Input placeholder="Enter text" />

// Error state
<Input error placeholder="Error state" />

// File input
<Input type="file" />

// Controlled input
<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Controlled"
/>

Notes

  • All native HTMLInputElement attributes are forwarded.
  • Setting type="file" automatically applies the hui-input--file BEM modifier — no need to add it manually.
  • The error prop only applies visual styling. Pair with FormField for full accessible error handling.

Button

Interactive button element with variant and size support via CVA.

Textarea

Multi-line text input with error state support.

On this page

ImportExportsTypesKey PropsAccessibilityUsageNotes