mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
116 lines
No EOL
2.9 KiB
Text
116 lines
No EOL
2.9 KiB
Text
<script>
|
|
import { ComboBox, InlineNotification } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
|
|
<div class="body-short-01">
|
|
Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
|
|
</div>
|
|
</InlineNotification>
|
|
|
|
### Default
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Selected id
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
selectedId="1"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Reactive example
|
|
|
|
<FileSource src="/framed/ComboBox/ReactiveComboBox" />
|
|
|
|
### Clear selection
|
|
|
|
To programmatically clear the selection, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `ComboBox.clear()` accessor.
|
|
|
|
Specify `focus: false` in the method options to avoid re-focusing the input.
|
|
|
|
<FileSource src="/framed/ComboBox/ComboBoxClear" />
|
|
|
|
### Multiple combo boxes
|
|
|
|
<FileSource src="/framed/ComboBox/MultipleComboBox" />
|
|
|
|
### Filterable
|
|
|
|
<FileSource src="/framed/ComboBox/FilterableComboBox" />
|
|
|
|
### Top direction
|
|
|
|
Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
|
|
|
|
<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### 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"}
|
|
]} /> |