MultiSelect
Table of Contents
Usage
Default
2
Select contact methods... <script>
import { MultiSelect } from "carbon-components-svelte";
</script>
<MultiSelect
titleText="Contact"
label="Select contact methods..."
items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
selectedIds={['0', '1']}
/>
Light variant
Select contact methods...
<script>
import { MultiSelect } from "carbon-components-svelte";
</script>
<MultiSelect
light
titleText="Contact"
label="Select contact methods..."
items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
/>
Inline type
Select contact methods...
<script>
import { MultiSelect } from "carbon-components-svelte";
</script>
<MultiSelect
type="inline"
titleText="Contact"
label="Select contact methods..."
items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
/>
Filterable
<script>
import { MultiSelect } from "carbon-components-svelte";
</script>
<MultiSelect
filterable
titleText="Contact"
placeholder="Filter contact methods..."
items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
/>