Input

Text-like field with icon slots. Labels and errors are composed with Field rather than baked in.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Default

Full name

<Field><FieldLabel htmlFor /><Input id /></Field>

02With description

We‘ll never share your email.

<FieldDescription>…</FieldDescription>

03Start icon

<Input startIcon={<SearchIcon />} />

04Password

Password

<Input endIcon={<button>…</button>} />

05Error

Username

Must be at least 3 characters.

<Input aria-invalid={value.length < 3} /> + <FieldError />

06Disabled

Workspace

<Input disabled />

07Types

Text

Number

URL

<Input type="text | number | email | url | password" />

08Controlled

Message

value = hello

<Input value={value} onValueChange={setValue} />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Input } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

input-example.tsx

import { Input } from "kipui";

<Input
  type="email"
  placeholder="you@example.com"
  onValueChange={(value) => console.log(value)}
/>

Set `aria-invalid` (Field does this for you) to get the error styling — there is no `invalid` prop.
`onValueChange` is a convenience on top of `onChange`; both fire.

Playground

Change the props and the snippet underneath updates with them.

Preview

Props

typeemail

placeholderyou@example.com

disabled

<Input type="email" placeholder="you@example.com" />

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
type"text" \| "email" \| "password" \| "search" \| "tel" \| "url" \| "number"	"text"	One of the supported text-like input types.
onValueChange(value: string) => void	required	Receives the raw string instead of the event.
startIconReactNode	required	Decorative element rendered inside the field, before the text.
endIconReactNode	required	Decorative element rendered inside the field, after the text.
classNamestring	required	Merged last, so callers can override any style.