Input

Interactive

See Input in Storybook for every variant, with live controls.

A single-line text field with an optional label, leading icon, hint and error.

import { Input } from "@kairosis/eidos";

<Input
  label="Project name"
  icon="search"
  placeholder="my-service"
  hint="Lowercase letters, numbers and dashes."
/>;

Props

Prop	Type	Default	Description
label	string	—	Rendered above the control
icon	IconName	—	Leading Lucide icon
error	string	—	Shown below; turns the border red
hint	string	—	Helper text below (suppressed when error is set)
size	"sm" | "md" | "lg"	"md"	28 / 36 / 44px
className / style		—	Target the outer wrapper
inputClassName	string	—	Targets the <input> itself

Also accepts every <input> attribute (value, onChange, type, disabled, placeholder). Forwards a ref to the <input>.

Guidelines

• error outranks focus: a field in error stays red while being corrected, and sets aria-invalid.
• error and hint occupy the same slot — error wins when both are set.
• The whole control is wrapped in a <label>, so clicking the label text focuses the field.
• Error copy should say what to do, not just what broke: "That name is already taken."