Input

This is a headless native text input. It has a modality-aware focus state, the native disabled and readonly booleans, and data attributes for the validation styles and the form styles.

Anatomy

The component has one part. The part makes a native <input> element with the type text, and it accepts bind:value.

<script>
	import { Input } from '@human-kit/ui';
</script>

<Input aria-label="Email" placeholder="name@example.com" invalid={hasError} required />

Validation

Use disabled, readonly, invalid, and required to control the validation state and the interaction state. The native behavior stays correct. The invalid prop sets aria-invalid and data-invalid.

Usage guidelines

• Put the native input props (type, name, value, defaultValue, placeholder, and autocomplete) directly on Input.
• Write the styles for the state with data-focused, data-focus-visible, data-hovered, data-disabled, data-readonly, data-invalid, and data-required.

Accessibility

• Input makes a native <input> element. The default type is text.
• data-focus-visible obeys the shared modality contract. The component shows it only for a keyboard focus or a virtual focus.
• The invalid prop sets aria-invalid. The readonly prop sets readonly and aria-readonly. The required prop sets required and aria-required.

API reference

Root

A native input element. It has a modality-aware focus state, and it shows its validation state in data attributes.

* required. Native HTML attributes of the underlying element are also accepted.