Dropdown

Source code
Table of Contents

Usage

Default

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

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

Light variant

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

<Dropdown
  light
  titleText="Contact"
  selectedIndex={0}
  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
/>

Inline type

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

<Dropdown
  type="inline"
  titleText="Contact"
  selectedIndex={0}
  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
/>

Disabled state

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

<Dropdown
  disabled
  titleText="Contact"
  selectedIndex={0}
  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
/>

Skeleton

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

<DropdownSkeleton />
Table of Contents