mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
65 lines
No EOL
1.3 KiB
Text
65 lines
No EOL
1.3 KiB
Text
<script>
|
|
import { ComboBox } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Default
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Selected index
|
|
|
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
|
selectedIndex={1}
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} />
|
|
|
|
### Filterable
|
|
|
|
<FileSource src="/framed/ComboBox/FilterableComboBox" />
|
|
|
|
### 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"}
|
|
]} />
|
|
|
|
### Disabled
|
|
|
|
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
|
|
items={[
|
|
{id: "0", text: "Slack"},
|
|
{id: "1", text: "Email"},
|
|
{id: "2", text: "Fax"}
|
|
]} /> |