Headless Core — Input

Powers Input internally. The smallest state shape in the package — no keyboard handler, since text entry is native browser behavior the factory doesn’t need to intercept.

Usage

import { createInput } from '@andersseen/headless-components/input';

const input = createInput({
  defaultValue: '',
  required: true,
  onValueChange: value => console.log('Value:', value),
});

input.actions.setValue('hello');
input.queries.isValid(); // true — non-empty and required is satisfied

Config

Option	Type	Default	Notes
defaultValue	string	''
disabled	boolean	false
required	boolean	false
maxLength	number	—	Forwarded as maxlength.
onValueChange	(value: string) => void	—	Not called if disabled.

State

value, disabled, required, touched (set on blur()), focused.

Actions & queries

Member	Signature	Notes
actions.setValue(v)	(value: string) => void	No-ops if disabled.
actions.setDisabled(v)	(disabled: boolean) => void
actions.setRequired(v)	(required: boolean) => void
actions.focus()	() => void	No-ops if disabled; sets focused: true.
actions.blur()	() => void	Sets focused: false and touched: true.
queries.isEmpty()	() => boolean
queries.isValid()	() => boolean	Always true unless required and empty.

Prop-getter

getInputProps() returns type: 'text', value, disabled, required, maxlength, aria-disabled, aria-required, aria-invalid (only true once the field has been touched and is empty and required — so it doesn’t flag invalid before the user has had a chance to type anything), data-state.

Live example

Type something, then clear it and click away — aria-invalid flips to true only after the field has been touched.

Next steps

Select — a richer relative with an options list, open state, and typeahead.