Skip to content

← All components

Actions and forms

Select

Native selection control styled by the system.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Select } from "@cofob/design-system-react";

/**
 * Complete Select parameter reference.
 * @param value/defaultValue
 *   type: string or string[]; controlled or initial value
 *   default: —
 *   example: "overview"
 * @param label
 *   type: string | renderable content
 *   default: —
 *   example: "Accessible label"
 * @param hint/description
 *   type: string | renderable content
 *   default: —
 *   example: "We will only use this for updates."
 * @param options/children
 *   type: SelectOption[] (Svelte) | option children
 *   default: —
 *   example: {options}
 * @param error
 *   type: string | renderable content
 *   default: —
 *   example: "Enter a valid value."
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param select attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function SelectExample() {
  return (
    <Select label="Theme"><option>System</option></Select>
  );
}

Svelte

svelte
<script lang="ts">
  import { Select } from "@cofob/design-system-svelte";

  // Complete Select parameter reference.
  // value/defaultValue
  //   type: string or string[]; controlled or initial value
  //   default: —
  //   example: "overview"
  // label
  //   type: string | renderable content
  //   default: —
  //   example: "Accessible label"
  // hint/description
  //   type: string | renderable content
  //   default: —
  //   example: "We will only use this for updates."
  // options/children
  //   type: SelectOption[] (Svelte) | option children
  //   default: —
  //   example: {options}
  // placeholder
  //   type: string
  //   default: —
  //   example: "Choose an option"
  // error
  //   type: string | renderable content
  //   default: —
  //   example: "Enter a valid value."
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // select attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Select label="Theme" options={options} bind:value />

HTML

html
<!--
  Complete Select parameter reference.
  value/defaultValue
    type: string or string[]; controlled or initial value
    default: —
    example: "overview"
  label
    type: string | renderable content
    default: —
    example: "Accessible label"
  hint/description
    type: string | renderable content
    default: —
    example: "We will only use this for updates."
  options/children
    type: SelectOption[] (Svelte) | option children
    default: —
    example: {options}
  placeholder
    type: string
    default: —
    example: "Choose an option"
  error
    type: string | renderable content
    default: —
    example: "Enter a valid value."
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  select attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<select class="cf-select"><option>System</option></select>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
value/defaultValuestring or string[]; controlled or initial value—React · Svelte · HTML"overview"Use the first form for controlled state and the second for initial state.
labelstring | renderable content—React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
hint/descriptionstring | renderable content—React · Svelte · HTML"We will only use this for updates."Supporting text announced with the control.
options/childrenSelectOption[] (Svelte) | option children—React · Svelte · HTML{options}Provides native option elements or structured Svelte option data.
placeholderstring—Svelte · HTML"Choose an option"Svelte placeholder option shown before a selection.
errorstring | renderable content—React · Svelte · HTML"Enter a valid value."Validation message and invalid visual/ARIA state.
size"sm" | "md" | "lg" (plus heading sizes)"md"React · Svelte · HTML"md"Applies a design-system size token.
select attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.