Select

Styled native dropdown.

A native `<select>` wrapped in the shared field chrome — best-in-class keyboard and mobile a11y, with a custom CSS chevron and zero runtime deps. Pass a flat `options` list or grouped `SelectOptGroup[]` (auto-detected); add a `placeholder` for an empty first choice, and wire `hint`/`error` text via `aria-describedby` exactly like `Input`.

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 { Select } from 'dssoca';

  let country = $state('');
  const options = [
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
  ];
</script>

<Select label="Country" bind:value={country} {options} placeholder="Select a country…" />

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-select">
  <label class="lbl" for="region">Region</label>
  <div class="control">
    <select class="select" id="region">
      <option value="eu" selected="">Europe</option>
      <option value="us">United States</option>
    </select>
    <span class="chevron" aria-hidden="true"></span>
  </div>
</div>

A labelled native <select>.

Props

Prop	Type	Default	Description
`options`	`SelectOption[] \| SelectOptGroup[]`	`[]`	Flat options, or grouped options (detected by an `options` array on the first element).
`value`	`string`	`''`	Bindable selected value (`bind:value`).
`label`	`string`	—	Label text; rendered as <label> wired to the select.
`id`	`string`	—	Select id; auto-generated for label association when unset.
`name`	`string`	—	Native form field name.
`placeholder`	`string`	—	Disabled, hidden first option, selected while the value is empty.
`required`	`boolean`	`false`	Marks the field required.
`disabled`	`boolean`	`false`	Renders the select non-interactive.
`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 to AT (role="alert").
`describedby`	`string`	—	Extra id(s) appended to aria-describedby after error/hint.
`onchange`	`(e: Event) => void`	—	Native change handler; fired on selection.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.