Input

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

Import

import '@kittl/ui';

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

Usage

<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>

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

/** Basic Input usage, rendered live on the docs site. */
export const InputUsage = () => (
  <>
    <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	Attribute	Type	Default	Description
size	size	's' | 'm' | 'l'	'm'	Input size
placeholder	placeholder	string	—	Placeholder text
label	label	string	—	Label displayed above the input
value	value	string	''	Current value
name	name	string	—	Form field name
error	error	string	—	Error message displayed below the input
maxlength	maxlength	number	—	Maximum character count
disabled	disabled	boolean	—	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