ComboBox

Source code
Table of Contents

Usage

Default

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

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

Selected index

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

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

Extra-large size

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

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

Small size

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

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

Disabled

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

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