Input

Text input field with optional label, error state, and form integration.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Input } from '@kittl/ui-react';

Usage

Web Component

<kittl-input label="Name" placeholder="Enter your name"></kittl-input>
<kittl-input label="Email" error="Invalid email address"></kittl-input>
<kittl-input size="s" disabled></kittl-input>

React

<Input label="Name" placeholder="Enter your name" onChange={(e) => console.log(e.detail.value)} />
<Input label="Email" error="Invalid email address" />
<Input size="s" disabled />

Props

Property	Type	Default	Description
size	's' | 'm' | 'l'	'm'	Input size
placeholder	string	—	Placeholder text
label	string	—	Label displayed above the input
value	string	''	Current value
name	string	—	Form field name
error	string	—	Error message displayed below the input
maxlength	number	—	Maximum character count
disabled	boolean	false	Disable the input

Events

Event	Detail	Description
change	{ value: string }	Fired on every input change

React prop: onChange

Form Integration

Input is form-associated. It updates ElementInternals.formValue on every change and can participate in native form submission.

Accessibility

• role="textbox" set via ElementInternals