Select

Source code
Table of Contents

Usage

Default

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

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

Item groups

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

<Select labelText="Carbon theme" selected="g10">
  <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="g90" text="Gray 90" />
    <SelectItem value="g100" text="Gray 100" />
  </SelectItemGroup>
</Select>

Light variant

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

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

Inline type

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

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

Disabled

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

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

Skeleton

<script>
  import { SelectSkeleton } from "carbon-components-svelte";
</script>

<SelectSkeleton />
Table of Contents