Input

A headless native text input with modality-aware focus state, native disabled and read-only booleans, and data attributes for validation and form styling.

Anatomy

A single component that renders a native <input> (type="text" by default) and supports 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 validation and interaction state while keeping native behavior. invalid maps to aria-invalid and data-invalid.

Usage guidelines

• Use native input props like type, name, value, defaultValue, placeholder, and autocomplete directly on Input.
• Style state with data-focused, data-focus-visible, data-hovered, data-disabled, data-readonly, data-invalid, and data-required.

Accessibility

• Input renders a native <input> with type="text" by default.
• data-focus-visible follows the shared modality contract and only appears for keyboard or virtual focus.
• invalid maps to aria-invalid, readonly maps to readonly and aria-readonly, and required maps to required and aria-required.

API reference

Root

A native input element with modality-aware focus state and validation data attributes.

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