mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
142 lines
No EOL
3.5 KiB
Text
142 lines
No EOL
3.5 KiB
Text
<script>
|
|
import { ComboBox, InlineNotification } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
`ComboBox` is keyed for performance reasons.
|
|
|
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
|
|
</InlineNotification>
|
|
|
|
## Default
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
## Custom slot
|
|
|
|
Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
|
|
|
|
<FileSource src="/framed/ComboBox/ComboBoxSlot" />
|
|
|
|
## Initial 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" />
|
|
|
|
## Filterable with custom label
|
|
|
|
Combine a custom label `itemToString` with the filterable option (e.g., internationalization).
|
|
|
|
<FileSource src="/framed/ComboBox/FilterableComboBoxCustomLabel" />
|
|
|
|
## 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 state
|
|
|
|
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
## Disabled items
|
|
|
|
Use the `disabled` property in the `items` prop to disable specific items.
|
|
|
|
<ComboBox
|
|
titleText="Contact"
|
|
placeholder="Select contact method"
|
|
items={[
|
|
{ id: "0", text: "Slack" },
|
|
{ id: "1", text: "Email", disabled: true },
|
|
{ id: "2", text: "Fax" },
|
|
]}
|
|
/> |