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/select';
formselection
01

Overview

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

Usage

svelte 
<script lang="ts">
  import Select from '@lostgradient/cinder/select';
</script>

<Select />
Live preview
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 Required Bindable Description
id text req Unique identifier — required for label association and ARIA wiring.
value NoInfer<T> bind Bound selected value. undefined when nothing is selected.
options readonly SelectOption<T>[] req Options to render as <option> children. The sole inference source for T.
label text Visible label rendered in a <label> associated via for.
hideLabel boolean false Visually hides the label 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.