Forms

Select

Native select control with label, description, and error wiring for picking one value from a short fixed option list.

import { Select } from '@lostgradient/cinder';
formselection
01

Overview

Reference usage

Native-style dropdown select for choosing a single option from a predefined list.

Usage

svelte 
<script lang="ts">
  import { Select } from '@lostgradient/cinder';
  const options = [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'enterprise', label: 'Enterprise (contact sales)', disabled: true },
  ];

  let plan = $state(options[0]?.value ?? 'free');
</script>

<Select id="plan" bind:value={plan} {options} label="Plan" />
Live preview

Basic select

Selected: us

02

When to use

Use when
  • Picking one value from a short list where the native control's mobile behavior is desirable.
  • Composing inside a form with built-in label and aria-describedby plumbing.
Avoid when
  • Filtering a long list by typing — use combobox instead.
  • Building a custom-styled menu trigger — use dropdown instead.
03

Examples

Basic select

Native select with label and bound string value.

Select with disabled option

Individual options can be marked disabled.

Typed options with as const

Use `as const` on the options array to infer a precise literal-union type for `T`. TypeScript then rejects any `value` that is not a member of the union at compile time.

Select with an error

A required Select whose placeholder is still selected is invalid: pass a non-empty `error` string to mark it. The control gets `aria-invalid="true"`, the message is wired via `aria-describedby`, and a danger ring replaces the focus ring when the invalid control is focused.

04

Props

Props for select
Name
Type
Default
Description
id required text Unique identifier — required for label association and ARIA wiring.
value bindable NoInfer<T> Bound selected value. undefined when nothing is selected.
options required SelectOption<T>[] Options to render as <option> children. The sole inference source for T.
label text Visible label rendered in a <label> associated via for.
labelVisible boolean true Whether the label is visibly rendered. Set false to visually hide it while keeping it available to assistive technology.
description text Helper text rendered below the control; wired via aria-describedby.
error text Validation error message; sets aria-invalid="true" and is wired via aria-describedby.
required boolean Marks the control required and sets the native required attribute.
disabled boolean Disables the control.