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

<script>
  import { ComboBox } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

### Default

<ComboBox titleText="Contact" placeholder="Select contact method"
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />

### Selected index

<ComboBox titleText="Contact" placeholder="Select contact method"
selectedIndex={1}
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />

### Multiple combo boxes

<FileSource src="/framed/ComboBox/MultipleComboBox" />

### Filterable

<FileSource src="/framed/ComboBox/FilterableComboBox" />

### Light variant

<ComboBox light titleText="Contact" placeholder="Select contact method"
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />

### Extra-large size

<ComboBox titleText="Contact" placeholder="Select contact method"
size="xl"
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />

### Small size

<ComboBox titleText="Contact" placeholder="Select contact method"
size="sm"
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />

### Invalid state

<ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />

### Warning state

<ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />

### Disabled

<ComboBox disabled titleText="Contact" placeholder="Select contact method"
items={[
  {id: "0", text: "Slack"},
  {id: "1", text: "Email"},
  {id: "2", text: "Fax"}
  ]}  />