Input

A single-line text input with optional label, hint, and error messaging. Supports a floating label variant where the label animates inside the field.

Installation

npx dafink-ui add input

Demo

We will never share your email.

Password

At least 8 characters.

Floating label

Disabled

Props

Name	Type	Default	Description
label	string	-	Visible label rendered above the input (default) or animated inside it (floating); also used to derive the input id.
placeholder	string	-	Placeholder text shown when the input is empty (default variant only).
hint	string	-	Helper text rendered below the input when there is no error.
error	string	-	Error message; switches the input to error state and sets aria-invalid.
variant	'default' \| 'floating'	'default'	floating animates the label inside the input field, acting as a placeholder until the field is focused or has a value.
disabled	boolean	false	Disables the input.

Accessibility

Input renders a native <input> with no custom focus management: native Tab order, native text-editing keys. The visible label is linked via htmlFor/id, and the error/hint message is linked via aria-describedby, with aria-invalid set when error is present. When type="password", a second real, independently Tab-reachable <button> toggles visibility and updates its own aria-labelbetween "Show password" and "Hide password".