carbon-components-svelte/docs/src/pages/components/Select.svx

---
components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
---

<script>
  import { Select, SelectItem, SelectItemGroup, SelectSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`Select` provides a dropdown menu for selecting a single option from a list. It supports various states, sizes, and includes built-in validation and helper text.

## Default

Create a basic select menu with `SelectItem` components. The first item's value is used as the default if `selected` is not set.

<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
  <SelectItem value="white" />
  <SelectItem value="g10" />
  <SelectItem value="g80" />
  <SelectItem value="g90" />
  <SelectItem value="g100" />
</Select>

## Custom item text

Use the `text` prop to customize the display text of each option.

<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Initial selected value

Set the initial selection using the `selected` prop.

<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Reactive example

The `selected` prop supports two-way binding for reactive updates.

<FileSource src="/framed/Select/SelectReactive" />

## Helper text

Add descriptive text below the select menu.

<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Hidden label

Visually hide the label while maintaining accessibility.

<Select hideLabel labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Item groups

Group related options using `SelectItemGroup` components.

<Select labelText="Carbon theme" selected="0">
  <SelectItem value="0" text="Select a theme" disabled hidden />
  <SelectItemGroup label="Light theme">
    <SelectItem value="white" text="White" />
    <SelectItem value="g10" text="Gray 10" />
  </SelectItemGroup>
  <SelectItemGroup label="Dark theme">
    <SelectItem value="g80" text="Gray 80" />
    <SelectItem value="g90" text="Gray 90" />
    <SelectItem value="g100" text="Gray 100" />
  </SelectItemGroup>
</Select>

## Small size

Use the small size variant for compact layouts.

<Select size="sm" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Extra-large size

Use the extra-large size variant for prominent selections.

<Select size="xl" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Inline variant

Use the inline variant for horizontal layouts.

<Select inline labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Light variant

Use the light variant for light backgrounds.

<Select light labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Invalid state

Show validation errors using the invalid state.

<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Warning state

Show warnings using the warning state.

<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Disabled state

Disable the select menu to prevent interaction.

<Select disabled labelText="Carbon theme" selected="g10" >
  <SelectItem value="white" text="White" />
  <SelectItem value="g10" text="Gray 10" />
  <SelectItem value="g80" text="Gray 80" />
  <SelectItem value="g90" text="Gray 90" />
  <SelectItem value="g100" text="Gray 100" />
</Select>

## Skeleton

Display a loading state using the skeleton variant.

<SelectSkeleton />

## Skeleton (hidden label)

<SelectSkeleton hideLabel />