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

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

### Default

<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>

### Hidden label

<Select hideLabel 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

<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

<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

<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>

### Extra-large size

<Select size="xl" 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>

### Small size

<Select size="sm" 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

<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

<SelectSkeleton />