Input

Labelled text input with validation affordances.

A text input with an optional label and auto-wired id. Supports `hint` and `error` helper text (error implies aria-invalid and is announced), prefix/suffix snippets inside the field, a `clearable` button, readonly/disabled styling, and native attribute forwarding (`autocomplete`, `inputmode`, `maxlength`, …).

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. 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="admin@hub.home"
  hint="we never share it"
  clearable
/>

HTML

interactive with vanilla.js The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css+ dssoca/vanilla.js — see Plain HTML & CSS.

html

<div class="ss-field">
  <label class="lbl" for="q">Search</label>
  <div class="control">
    <input class="ss-input" id="q" type="text" value="query" placeholder="Search…"/>
    <button type="button" class="clear" aria-label="Clear">×</button>
  </div>
</div>

vanilla.js wires the clear button (empties, refocuses, hides itself until you type).

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 (adds a marker).
`disabled`	`boolean`	`false`	Disable the field.
`readonly`	`boolean`	`false`	Native readonly — value visible but not editable; rendered muted.
`invalid`	`boolean`	—	Apply invalid styling + aria-invalid (also implied by `error`).
`hint`	`string`	—	Helper text rendered under the input and wired via aria-describedby.
`error`	`string`	—	Error text under the input; implies aria-invalid and is announced to AT.
`describedby`	`string`	—	id(s) of additional describing element(s) (aria-describedby).
`prefix`	`Snippet`	—	Decorative leading content inside the field, before the input.
`suffix`	`Snippet`	—	Decorative trailing content inside the field, after the input.
`clearable`	`boolean`	`false`	Renders a clear button; hidden when empty/readonly/disabled.
`autocomplete`	`FullAutoFill`	—	Native autocomplete hint.
`inputmode`	`HTMLInputAttributes['inputmode']`	—	Native inputmode hint for on-screen keyboards.
`maxlength`	`number`	—	Native maxlength.
`oninput`	`(e) => void`	—	Input handler.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`...rest`	`HTMLInputAttributes`	—	Any remaining native input attributes / handlers are forwarded.