DateField

Styled native date input.

A styled wrapper around the native `<input type="date">`, sharing the field chrome of `Input`: label association, focus ring on the wrapper, hint/error messaging wired through `aria-describedby`, and invalid/disabled/readonly states. Bind an ISO `yyyy-mm-dd` string via `value` and constrain the range with `min`/`max`. The calendar picker glyph is tuned to read on the dark theme; zero border-radius.

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 { DateField } from 'dssoca';
  let date = $state('2026-06-15');
</script>

<DateField label="Start date" bind:value={date} />
<DateField label="Booking" bind:value={date} min="2026-06-01" max="2026-06-30" />

HTML

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

html

<div class="ss-datefield">
  <label class="lbl" for="date">Date</label>
  <div class="control">
    <input class="field" type="date" id="date" value="" aria-describedby="date-hint"/>
  </div>
  <span class="msg hint" id="date-hint">YYYY-MM-DD</span>
</div>

A labelled native <input type="date">.

Props

Prop	Type	Default	Description
`label`	`string`	—	Label text; rendered and associated to the input.
`id`	`string`	—	Input id; auto-generated for label association when unset.
`name`	`string`	—	Native form field name.
`value`	`string`	`''`	Bindable ISO date string (yyyy-mm-dd).
`min`	`string`	—	Earliest selectable date (ISO yyyy-mm-dd).
`max`	`string`	—	Latest selectable date (ISO yyyy-mm-dd).
`required`	`boolean`	`false`	Marks the field as required for form validation.
`disabled`	`boolean`	`false`	Renders the field non-interactive.
`readonly`	`boolean`	`false`	Native readonly — value visible but not editable; rendered muted.
`invalid`	`boolean`	—	Marks the field invalid for assistive tech (aria-invalid).
`hint`	`string`	—	Helper text under the field, wired via aria-describedby.
`error`	`string`	—	Error text under the field; implies aria-invalid and is announced via role="alert".
`describedby`	`string`	—	Extra id(s) appended to aria-describedby after error/hint.
`onchange`	`(e: Event) => void`	—	Native change handler (fired when the committed date changes).
`oninput`	`(e: Event) => void`	—	Native input handler.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.