Input

Text input with label, error, and size variants.

import { Input } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

Prop	Type	Default	Description
`type`	`'text' \| 'email' \| 'tel' \| 'url' \| 'number' \| 'search' \| 'password'`	`'text'`	Input type variant.
`placeholder`	`string`	—	Placeholder text displayed when input is empty.
`value`	`string`	—	Current input value.
`onInput`	`(value: string) => void`	—	Callback fired when input value changes.
`disabled`	`boolean`	—	Whether the input is disabled.
`error`	`string`	—	Error message displayed below the input.
`class`	`string`	—	Additional CSS class name.
`id`	`string`	—	Input element ID for label association.
`name`	`string`	—	Input element name for form submission.
`unstyled`	`boolean`	`false`	Disable default styling and apply only custom classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.