Input

Labelled text input with validation affordances.

A text input with an optional label, auto-wired id, and `invalid` / `describedby` for accessible error messaging.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Input } from 'dssoca';
  let email = $state('');
</script>

<Input label="email" type="email" bind:value={email}
  placeholder="rafael@hub.home" />

Props

Prop	Type	Default	Description
`label`	`string`	—	Visible label (associated via generated id).
`value`	`string`	—	Bindable value.
`type`	`string`	`'text'`	Native input type.
`placeholder`	`string`	—	Placeholder text.
`required`	`boolean`	`false`	Marks the field required.
`disabled`	`boolean`	`false`	Disable the field.
`invalid`	`boolean`	`false`	Apply invalid styling + aria-invalid.
`describedby`	`string`	—	id of an error/hint element (aria-describedby).
`oninput`	`(e) => void`	—	Input handler.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.