mcp/carbon-components-svelte

Fork 0

mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00

Eric Liu 33704fd5a9 v0.11.0

2020-09-05 15:34:49 -07:00

130 KiB

Raw Blame History

Component Index

144 components exported from carbon-components-svelte 0.11.0

Accordion
- AccordionSkeleton
- Accordion
- AccordionItem
Breadcrumb
- BreadcrumbSkeleton
- Breadcrumb
- BreadcrumbItem
Button
- ButtonSkeleton
- Button
- ButtonSet
Checkbox
- CheckboxSkeleton
- Checkbox
CodeSnippet
- CodeSnippetSkeleton
- CodeSnippet
ComboBox
ComposedModal
- ComposedModal
- ModalBody
- ModalFooter
- ModalHeader
ContentSwitcher
- ContentSwitcher
- Switch
Copy
CopyButton
DataTable
- DataTable
- Table
- TableBody
- TableCell
- TableContainer
- TableHead
- TableHeader
- TableRow
DataTableSkeleton
DatePicker
- DatePicker
- DatePickerInput
Dropdown
- DropdownSkeleton
- Dropdown
FileUploader
- FileUploader
- FileUploaderButton
- FileUploaderDropContainer
- FileUploaderItem
- Filename
Form
FormGroup
FormItem
FormLabel
Grid
- Column
- Grid
- Row
Icon
- IconSkeleton
- Icon
InlineLoading
Link
ListBox
- ListBox
- ListBoxField
- ListBoxMenu
- ListBoxMenuIcon
- ListBoxMenuItem
- ListBoxSelection
ListItem
Loading
Modal
MultiSelect
Notification
- InlineNotification
- NotificationActionButton
- NotificationButton
- NotificationIcon
- NotificationTextDetails
- ToastNotification
NumberInput
- NumberInputSkeleton
- NumberInput
OrderedList
OverflowMenu
- OverflowMenu
- OverflowMenuItem
Pagination
- PaginationSkeleton
- Pagination
PaginationNav
ProgressIndicator
- ProgressIndicatorSkeleton
- ProgressIndicator
- ProgressStep
RadioButton
- RadioButtonSkeleton
- RadioButton
RadioButtonGroup
Search
- SearchSkeleton
- Search
Select
- SelectSkeleton
- Select
- SelectItem
- SelectItemGroup
SkeletonPlaceholder
SkeletonText
Slider
- SliderSkeleton
- Slider
StructuredList
- StructuredListSkeleton
- StructuredList
- StructuredListBody
- StructuredListCell
- StructuredListHead
- StructuredListInput
- StructuredListRow
Tabs
- Tab
- TabContent
- Tabs
- TabsSkeleton
Tag
- TagSkeleton
- Tag
TextArea
- TextAreaSkeleton
- TextArea
TextInput
- PasswordInput
- TextInputSkeleton
- TextInput
Tile
- ClickableTile
- ExpandableTile
- RadioTile
- SelectableTile
- Tile
- TileGroup
TimePicker
- TimePicker
- TimePickerSelect
Toggle
- ToggleSkeleton
- Toggle
ToggleSmall
- ToggleSmallSkeleton
- ToggleSmall
Tooltip
TooltipDefinition
TooltipIcon
UIShell
- Content
- Header
- HeaderAction
- HeaderActionLink
- HeaderActionSearch
- HeaderNav
- HeaderNavItem
- HeaderNavMenu
- HeaderPanelDivider
- HeaderPanelLink
- HeaderPanelLinks
- HeaderUtilities
- HeaderGlobalAction
- SideNav
- SideNavItems
- SideNavLink
- SideNavMenu
- SideNavMenuItem
- SkipToContent
UnorderedList

Accordion

Import path

import { Accordion } from "carbon-components-svelte";

Props

Prop name	Type	Default value
align	`"start" \| "end"`	"end"
skeleton	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

AccordionItem

Import path

import { AccordionItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
title	`string`	"title"
open	`boolean`	false
iconDescription	`string`	"Expand/Collapse"

Slots

<slot>...</slot>

Forwarded events

on:animationend
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown

Dispatched events

No dispatched events.

AccordionSkeleton

Import path

import { AccordionSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
count	`number`	4
open	`boolean`	true

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Import path

import { Breadcrumb } from "carbon-components-svelte";

Props

Prop name	Type	Default value
noTrailingSlash	`boolean`	false
skeleton	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

BreadcrumbItem

Import path

import { BreadcrumbItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
href	`string`	--
isCurrentPage	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

BreadcrumbSkeleton

Import path

import { BreadcrumbSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
noTrailingSlash	`boolean`	false
count	`number`	3

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Button

Import path

import { Button } from "carbon-components-svelte";

Props

Prop name	Type	Default value
kind	`"primary" \| "secondary" \| "tertiary" \| "ghost" \| "danger"`	"primary"
size	`"default" \| "field" \| "small"`	"default"
hasIconOnly	`boolean`	false
icon	`typeof import("carbon-icons-svelte/lib/Add16").default`	--
iconDescription	`string`	--
tooltipAlignment	`"start" \| "center" \| "end"`	--
tooltipPosition	`"top" \| "right" \| "bottom" \| "left"`	--
as	`boolean`	false
skeleton	`boolean`	false
disabled	`boolean`	false
href	`string`	--
tabindex	`string`	"0"
type	`string`	"button"
ref	`null \| HTMLAnchorElement \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ButtonSet

Import path

import { ButtonSet } from "carbon-components-svelte";

Props

Prop name	Type	Default value
stacked	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ButtonSkeleton

Import path

import { ButtonSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
href	`string`	--
small	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Checkbox

Import path

import { Checkbox } from "carbon-components-svelte";

Props

Prop name	Type	Default value
checked	`boolean`	false
indeterminate	`boolean`	false
skeleton	`boolean`	false
readonly	`boolean`	false
disabled	`boolean`	false
labelText	`string`	""
hideLabel	`boolean`	false
name	`string`	""
title	`string`	--
id	`string`	--
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change

Dispatched events

on:check

CheckboxSkeleton

Import path

import { CheckboxSkeleton } from "carbon-components-svelte";

Props

No exported props.

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ClickableTile

Import path

import { ClickableTile } from "carbon-components-svelte";

Props

Prop name	Type	Default value
clicked	`boolean`	false
light	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:keydown
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

CodeSnippet

Import path

import { CodeSnippet } from "carbon-components-svelte";

Props

Prop name	Type	Default value
type	`"single" \| "inline" \| "multi"`	"single"
code	`string`	--
expanded	`boolean`	false
hideCopyButton	`boolean`	false
light	`boolean`	false
skeleton	`boolean`	false
copyButtonDescription	`string`	--
copyLabel	`string`	--
feedback	`string`	"Copied!"
feedbackTimeout	`number`	2000
showLessText	`string`	"Show less"
showMoreText	`string`	"Show more"
showMoreLess	`boolean`	false
id	`string`	--
ref	`null \| HTMLPreElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:animationend

Dispatched events

No dispatched events.

CodeSnippetSkeleton

Import path

import { CodeSnippetSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
type	`"single" \| "inline" \| "multi"`	"single"

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Column

Import path

import { Column } from "carbon-components-svelte";

Props

// `Column` type definitions

type ColumnSize = boolean | number;

interface ColumnSizeDescriptor {
  span?: ColumnSize;
  offset: number;
}

type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;

Prop name	Type	Default value
as	`boolean`	false
noGutter	`boolean`	false
noGutterLeft	`boolean`	false
noGutterRight	`boolean`	false
aspectRatio	`"2x1" \| "16x9" \| "9x16" \| "1x2" \| "4x3" \| "3x4" \| "1x1"`	--
sm	`ColumnBreakpoint`	--
md	`ColumnBreakpoint`	--
lg	`ColumnBreakpoint`	--
xlg	`ColumnBreakpoint`	--
max	`ColumnBreakpoint`	--

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ComboBox

Import path

import { ComboBox } from "carbon-components-svelte";

Props

// `ComboBox` type definitions

interface ComboBoxItem {
  id: string;
  text: string;
}

Prop name	Type	Default value
items	`ComboBoxItem[]`	--
itemToString	`(item: ComboBoxItem) => string`	--
selectedIndex	`number`	--
value	`string`	""
size	`"sm" \| "xl"`	--
disabled	`boolean`	false
titleText	`string`	""
placeholder	`string`	""
helperText	`string`	""
invalidText	`string`	""
invalid	`boolean`	false
light	`boolean`	false
open	`boolean`	false
shouldFilterItem	`(item: ComboBoxItem, value: string) => boolean`	--
translateWithId	`(id: any) => string`	--
id	`string`	--
name	`string`	--
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:keydown
on:focus
on:blur
on:clear

Dispatched events

on:select

ComposedModal

Import path

import { ComposedModal } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`"xs" \| "sm" \| "lg"`	--
open	`boolean`	false
danger	`boolean`	false
containerClass	`string`	""
selectorPrimaryFocus	`string`	"[data-modal-primary-focus]"
ref	`null \| HTMLElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:transitionend

Dispatched events

on:submit
on:close
on:open

Content

Import path

import { Content } from "carbon-components-svelte";

Props

Prop name	Type	Default value
id	`string`	"main-content"

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ContentSwitcher

Import path

import { ContentSwitcher } from "carbon-components-svelte";

Props

Prop name	Type	Default value
selectedIndex	`number`	0
light	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:change

Copy

Import path

import { Copy } from "carbon-components-svelte";

Props

Prop name	Type	Default value
feedback	`string`	"Copied!"
feedbackTimeout	`number`	2000
ref	`null \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:animationend

Dispatched events

No dispatched events.

CopyButton

Import path

import { CopyButton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
iconDescription	`string`	"Copy to clipboard"

Slots

No slots.

Forwarded events

on:click
on:animationend

Dispatched events

No dispatched events.

DataTable

Import path

import { DataTable } from "carbon-components-svelte";

Props

Prop name	Type	Default value
headers	`{key: string; value: string;}`	--
rows	`Object[]`	--
size	`"compact" \| "short" \| "tall"`	--
title	`string`	""
description	`string`	""
zebra	`boolean`	false
sortable	`boolean`	false
stickyHeader	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

on:click
on:click:header
on:click:row
on:click:cell

DataTableSkeleton

Import path

import { DataTableSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
columns	`number`	5
rows	`number`	5
compact	`boolean`	false
zebra	`boolean`	false
headers	`string[]`	--

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

DatePicker

Import path

import { DatePicker } from "carbon-components-svelte";

Props

Prop name	Type	Default value
datePickerType	`"simple" \| "single" \| "range"`	"simple"
value	`string`	""
appendTo	`HTMLElement`	--
dateFormat	`string`	"m/d/Y"
maxDate	`null \| string \| Date`	null
minDate	`null \| string \| Date`	null
locale	`string`	"en"
short	`boolean`	false
light	`boolean`	false
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:change

DatePickerInput

Import path

import { DatePickerInput } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`"sm" \| "xl"`	--
type	`string`	"text"
placeholder	`string`	""
pattern	`string`	"\d{1,2}\/\d{1,2}\/\d{4}"
disabled	`boolean`	false
iconDescription	`string`	""
id	`string`	--
labelText	`string`	""
hideLabel	`boolean`	false
invalid	`boolean`	false
invalidText	`string`	""
name	`string`	--
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:input
on:keydown
on:blur

Dispatched events

No dispatched events.

Import path

import { Dropdown } from "carbon-components-svelte";

Props

// `Dropdown` type definitions

type DropdownItemId = string;

type DropdownItemText = string;

interface DropdownItem {
  id: DropdownItemId;
  text: DropdownItemText;
}

Prop name	Type	Default value
items	`DropdownItem[]`	--
itemToString	`(item: DropdownItem) => string`	--
selectedIndex	`number`	--
type	`"default" \| "inline"`	"default"
size	`"sm" \| "lg" \| "xl"`	--
open	`boolean`	false
inline	`boolean`	false
light	`boolean`	false
disabled	`boolean`	false
titleText	`string`	""
invalid	`boolean`	false
invalidText	`string`	""
helperText	`string`	""
label	`string`	--
translateWithId	`(id: any) => string`	--
id	`string`	--
name	`string`	--
ref	`null \| HTMLButtonElement`	null

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

DropdownSkeleton

Import path

import { DropdownSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
inline	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ExpandableTile

Import path

import { ExpandableTile } from "carbon-components-svelte";

Props

Prop name	Type	Default value
expanded	`boolean`	false
light	`boolean`	false
tileMaxHeight	`number`	0
tilePadding	`number`	0
tileCollapsedIconText	`string`	"Interact to expand Tile"
tileExpandedIconText	`string`	"Interact to collapse Tile"
tabindex	`string`	"0"
id	`string`	--
ref	`null \| HTMLElement`	null

Slots

<slot name="above">...</slot>
<slot name="below">...</slot>

Forwarded events

on:click
on:keypress
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

FileUploader

Import path

import { FileUploader } from "carbon-components-svelte";

Props

Prop name	Type	Default value
status	`"uploading" \| "edit" \| "complete"`	"uploading"
accept	`string[]`	--
files	`string[]`	--
multiple	`boolean`	false
clearFiles (`constant`)	`() => any`	--
labelDescription	`string`	""
labelTitle	`string`	""
kind	`"primary" \| "secondary" \| "tertiary" \| "ghost" \| "danger"`	"primary"
buttonLabel	`string`	""
iconDescription	`string`	"Provide icon description"
name	`string`	""

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:keydown

Dispatched events

on:add
on:remove

FileUploaderButton

Import path

import { FileUploaderButton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
accept	`string[]`	--
multiple	`boolean`	false
disabled	`boolean`	false
disableLabelChanges	`boolean`	false
kind	`"primary" \| "secondary" \| "tertiary" \| "ghost" \| "danger"`	"primary"
labelText	`string`	"Add file"
role	`string`	"button"
tabindex	`string`	"0"
id	`string`	--
name	`string`	""
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:keydown
on:change
on:click

Dispatched events

No dispatched events.

FileUploaderDropContainer

Import path

import { FileUploaderDropContainer } from "carbon-components-svelte";

Props

// `FileUploaderDropContainer` type definitions

type Files = string[];

Prop name	Type	Default value
accept	`string[]`	--
multiple	`boolean`	false
validateFiles	`(files: Files) => Files`	--
labelText	`string`	"Add file"
role	`string`	"button"
disabled	`boolean`	false
tabindex	`string`	"0"
id	`string`	--
name	`string`	""
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:dragover
on:dragleave
on:drop
on:keydown
on:change
on:click

Dispatched events

on:add

FileUploaderItem

Import path

import { FileUploaderItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
status	`"uploading" \| "edit" \| "complete"`	"uploading"
iconDescription	`string`	""
invalid	`boolean`	false
errorSubject	`string`	""
errorBody	`string`	""
id	`string`	--
name	`string`	""

Slots

No slots.

Forwarded events

on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:delete

Filename

Import path

import { Filename } from "carbon-components-svelte";

Props

Prop name	Type	Default value
status	`"uploading" \| "edit" \| "complete"`	"uploading"
iconDescription	`string`	""
invalid	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:keydown

Dispatched events

No dispatched events.

Form

Import path

import { Form } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:submit

Dispatched events

No dispatched events.

FormGroup

Import path

import { FormGroup } from "carbon-components-svelte";

Props

Prop name	Type	Default value
invalid	`boolean`	false
message	`boolean`	false
messageText	`string`	""
legendText	`string`	""

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

FormItem

Import path

import { FormItem } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

FormLabel

Import path

import { FormLabel } from "carbon-components-svelte";

Props

Prop name	Type	Default value
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Grid

Import path

import { Grid } from "carbon-components-svelte";

Props

Prop name	Type	Default value
as	`boolean`	false
condensed	`boolean`	false
narrow	`boolean`	false
fullWidth	`boolean`	false
noGutter	`boolean`	false
noGutterLeft	`boolean`	false
noGutterRight	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Header

Import path

import { Header } from "carbon-components-svelte";

Props

Prop name	Type	Default value
expandedByDefault	`boolean`	true
isSideNavOpen	`boolean`	false
uiShellAriaLabel	`string`	--
href	`string`	--
company	`string`	--
platformName	`string`	--

Slots

<slot>...</slot>

Forwarded events

on:click

Dispatched events

No dispatched events.

HeaderAction

Import path

import { HeaderAction } from "carbon-components-svelte";

Props

Prop name	Type	Default value
isOpen	`boolean`	false
icon	`{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }`	--
text	`string`	--
ref	`null \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click

Dispatched events

on:close

HeaderActionLink

Import path

import { HeaderActionLink } from "carbon-components-svelte";

Props

Prop name	Type	Default value
linkIsActive	`boolean`	false
href	`string`	--
icon	`{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }`	--

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderActionSearch

Import path

import { HeaderActionSearch } from "carbon-components-svelte";

Props

Prop name	Type	Default value
searchIsActive	`boolean`	false

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

on:focusInputSearch
on:focusOutInputSearch
on:inputSearch

HeaderGlobalAction

Import path

import { HeaderGlobalAction } from "carbon-components-svelte";

Props

Prop name	Type	Default value
isActive	`boolean`	false
icon	`typeof import("carbon-icons-svelte/lib/Add16").default`	--
ref	`null \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click

Dispatched events

No dispatched events.

HeaderNav

Import path

import { HeaderNav } from "carbon-components-svelte";

Props

Prop name	Type	Default value
ariaLabel	`string`	--

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderNavItem

Import path

import { HeaderNavItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
href	`string`	--
text	`string`	--

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
on:focus
on:blur

Dispatched events

No dispatched events.

HeaderNavMenu

Import path

import { HeaderNavMenu } from "carbon-components-svelte";

Props

Prop name	Type	Default value
expanded	`boolean`	false
href	`string`	"/"
text	`string`	--
iconDescription	`string`	"Expand/Collapse"

Slots

<slot>...</slot>

Forwarded events

on:keydown
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:focus
on:blur

Dispatched events

No dispatched events.

HeaderPanelDivider

Import path

import { HeaderPanelDivider } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderPanelLink

Import path

import { HeaderPanelLink } from "carbon-components-svelte";

Props

Prop name	Type	Default value
href	`string`	--

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderPanelLinks

Import path

import { HeaderPanelLinks } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

HeaderUtilities

Import path

import { HeaderUtilities } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Icon

Import path

import { Icon } from "carbon-components-svelte";

Props

Prop name	Type	Default value
render	`typeof import("carbon-icons-svelte/lib/Add16").default`	--
skeleton	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

IconSkeleton

Import path

import { IconSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`number`	16

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

InlineLoading

Import path

import { InlineLoading } from "carbon-components-svelte";

Props

Prop name	Type	Default value
status	`"active" \| "inactive" \| "finished" \| "error"`	"active"
description	`string`	--
iconDescription	`string`	--
successDelay	`number`	1500

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:success

InlineNotification

Import path

import { InlineNotification } from "carbon-components-svelte";

Props

Prop name	Type	Default value
notificationType	`"toast" \| "inline"`	"inline"
kind	`"error" \| "info" \| "info-square" \| "success" \| "warning" \| "warning-alt"`	"error"
lowContrast	`boolean`	false
timeout	`number`	0
role	`string`	"alert"
title	`string`	"Title"
subtitle	`string`	""
hideCloseButton	`boolean`	false
iconDescription	`string`	"Closes notification"

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:close

Link

Import path

import { Link } from "carbon-components-svelte";

Props

Prop name	Type	Default value
inline	`boolean`	false
disabled	`boolean`	false
ref	`null \| HTMLAnchorElement \| HTMLParagraphElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ListBox

Import path

import { ListBox } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`"sm" \| "xl"`	--
type	`"default" \| "inline"`	"default"
open	`boolean`	false
light	`boolean`	false
disabled	`boolean`	false
invalid	`boolean`	false
invalidText	`string`	""

Slots

<slot>...</slot>

Forwarded events

on:keydown
on:click

Dispatched events

No dispatched events.

ListBoxField

Import path

import { ListBoxField } from "carbon-components-svelte";

Props

// `ListBoxField` type definitions

type ListBoxFieldTranslationId = "close" | "open";

Prop name	Type	Default value
disabled	`boolean`	false
role	`string`	"combobox"
tabindex	`string`	"-1"
translationIds (`constant`)	`{ close: "close"; open: "open"; }`	{ close: "close", open: "open" }
translateWithId	`(id: ListBoxFieldTranslationId) => string`	--
id	`string`	--
ref	`null \| HTMLElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown
on:blur

Dispatched events

No dispatched events.

ListBoxMenu

Import path

import { ListBoxMenu } from "carbon-components-svelte";

Props

Prop name	Type	Default value
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ListBoxMenuIcon

Import path

import { ListBoxMenuIcon } from "carbon-components-svelte";

Props

// `ListBoxMenuIcon` type definitions

type ListBoxMenuIconTranslationId = "close" | "open";

Prop name	Type	Default value
open	`boolean`	false
translationIds (`constant`)	`{ close: "close"; open: "open" }`	{ close: "close", open: "open" }
translateWithId	`(id: ListBoxMenuIconTranslationId) => string`	--

Slots

No slots.

Forwarded events

on:click

Dispatched events

No dispatched events.

ListBoxMenuItem

Import path

import { ListBoxMenuItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
active	`boolean`	false
highlighted	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ListBoxSelection

Import path

import { ListBoxSelection } from "carbon-components-svelte";

Props

// `ListBoxSelection` type definitions

type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";

Prop name	Type	Default value
selectionCount	`any`	--
disabled	`boolean`	false
translationIds (`constant`)	`{ clearAll: "clearAll"; clearSelection: "clearSelection" }`	{ clearAll: "clearAll", clearSelection: "clearSelection", }
translateWithId	`(id: ListBoxSelectionTranslationId) => string`	--
ref	`null \| HTMLElement`	null

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

on:clear

ListItem

Import path

import { ListItem } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Loading

Import path

import { Loading } from "carbon-components-svelte";

Props

Prop name	Type	Default value
small	`boolean`	false
active	`boolean`	true
withOverlay	`boolean`	true
description	`string`	"Active loading indicator"
id	`string`	--

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Import path

import { Modal } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`"xs" \| "sm" \| "lg"`	--
open	`boolean`	false
danger	`boolean`	false
passiveModal	`boolean`	false
modalHeading	`string`	--
modalLabel	`string`	--
modalAriaLabel	`string`	--
iconDescription	`string`	"Close the modal"
hasForm	`boolean`	false
hasScrollingContent	`boolean`	false
primaryButtonText	`string`	""
primaryButtonDisabled	`boolean`	false
shouldSubmitOnEnter	`boolean`	true
secondaryButtonText	`string`	""
selectorPrimaryFocus	`string`	"[data-modal-primary-focus]"
id	`string`	--
ref	`null \| HTMLElement`	null

Slots

<slot>...</slot>

Forwarded events

on:keydown
on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:submit
on:click:button--secondary
on:close
on:open

ModalBody

Import path

import { ModalBody } from "carbon-components-svelte";

Props

Prop name	Type	Default value
hasForm	`boolean`	false
hasScrollingContent	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ModalFooter

Import path

import { ModalFooter } from "carbon-components-svelte";

Props

Prop name	Type	Default value
primaryButtonText	`string`	""
primaryButtonDisabled	`boolean`	false
primaryClass	`string`	--
secondaryButtonText	`string`	""
secondaryClass	`string`	--
danger	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

ModalHeader

Import path

import { ModalHeader } from "carbon-components-svelte";

Props

Prop name	Type	Default value
title	`string`	""
label	`string`	""
labelClass	`string`	""
titleClass	`string`	""
closeClass	`string`	""
closeIconClass	`string`	""
iconDescription	`string`	"Close"

Slots

<slot>...</slot>

Forwarded events

on:click

Dispatched events

No dispatched events.

MultiSelect

Import path

import { MultiSelect } from "carbon-components-svelte";

Props

// `MultiSelect` type definitions

type MultiSelectItemId = string;

type MultiSelectItemText = string;

interface MultiSelectItem {
  id: MultiSelectItemId;
  text: MultiSelectItemText;
}

Prop name	Type	Default value
items	`MultiSelectItem[]`	--
itemToString	`(item: MultiSelectItem) => string`	--
selectedIds	`MultiSelectItemId[]`	--
value	`string`	""
size	`"sm" \| "lg" \| "xl"`	--
type	`"default" \| "inline"`	"default"
selectionFeedback	`"top" \| "fixed" \| "top-after-reopen"`	"top-after-reopen"
disabled	`boolean`	false
filterable	`boolean`	false
filterItem	`(item: MultiSelectItem, value: string) => string`	--
open	`boolean`	false
light	`boolean`	false
locale	`string`	"en"
placeholder	`string`	""
sortItem	`(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem`	--
translateWithId	`(id: any) => string`	--
titleText	`string`	""
useTitleInItem	`boolean`	false
invalid	`boolean`	false
invalidText	`string`	""
helperText	`string`	""
label	`string`	""
id	`string`	--
name	`string`	--

Slots

No slots.

Forwarded events

on:keydown
on:focus
on:blur

Dispatched events

No dispatched events.

NotificationActionButton

Import path

import { NotificationActionButton } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

NotificationButton

Import path

import { NotificationButton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
notificationType	`"toast" \| "inline"`	"toast"
renderIcon	`typeof import("carbon-icons-svelte/lib/Add16").default`	--
title	`string`	--
iconDescription	`string`	"Close icon"

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

NotificationIcon

Import path

import { NotificationIcon } from "carbon-components-svelte";

Props

Prop name	Type	Default value
kind	`"error" \| "info" \| "info-square" \| "success" \| "warning" \| "warning-alt"`	"error"
notificationType	`"toast" \| "inline"`	"toast"
iconDescription	`string`	"Closes notification"

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

NotificationTextDetails

Import path

import { NotificationTextDetails } from "carbon-components-svelte";

Props

Prop name	Type	Default value
notificationType	`"toast" \| "inline"`	"toast"
title	`string`	"Title"
subtitle	`string`	""
caption	`string`	"Caption"

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

NumberInput

Import path

import { NumberInput } from "carbon-components-svelte";

Props

// `NumberInput` type definitions

type NumberInputTranslationId = "increment" | "decrement";

Prop name	Type	Default value
size	`"sm" \| "xl"`	--
value	`string`	""
step	`number`	1
max	`number`	--
min	`number`	--
light	`boolean`	false
readonly	`boolean`	false
mobile	`boolean`	false
allowEmpty	`boolean`	false
disabled	`boolean`	false
iconDescription	`string`	""
invalid	`boolean`	false
invalidText	`string`	""
helperText	`string`	""
label	`string`	""
hideLabel	`boolean`	false
translateWithId	`(id: NumberInputTranslationId) => string`	--
translationIds (`constant`)	`{ increment: "increment"; decrement: "decrement" }`	{ increment: "increment", decrement: "decrement", }
id	`string`	--
name	`string`	--
ref	`null \| HTMLInputElement`	null

Slots

<slot name="label">...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:input

Dispatched events

on:change

NumberInputSkeleton

Import path

import { NumberInputSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
hideLabel	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

OrderedList

Import path

import { OrderedList } from "carbon-components-svelte";

Props

Prop name	Type	Default value
nested	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

OverflowMenu

Import path

import { OverflowMenu } from "carbon-components-svelte";

Props

Prop name	Type	Default value
direction	`"top" \| "bottom"`	"bottom"
open	`boolean`	false
light	`boolean`	false
flipped	`boolean`	false
menuOptionsClass	`string`	--
icon	`typeof import("carbon-icons-svelte/lib/Add16").default`	--
iconClass	`string`	--
iconDescription	`string`	"Open and close list of options"
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown

Dispatched events

on:close

OverflowMenuItem

Import path

import { OverflowMenuItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
text	`string`	"Provide text"
href	`string`	""
primaryFocus	`boolean`	false
disabled	`boolean`	false
hasDivider	`boolean`	false
danger	`boolean`	false
requireTitle	`boolean`	true
id	`string`	--
ref	`null \| HTMLAnchorElement \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:keydown

Dispatched events

No dispatched events.

Pagination

Import path

import { Pagination } from "carbon-components-svelte";

Props

Prop name	Type	Default value
page	`number`	1
totalItems	`number`	0
disabled	`boolean`	false
forwardText	`string`	"Next page"
backwardText	`string`	"Previous page"
itemsPerPageText	`string`	"Items per page:"
itemText	`(min: number, max: number) => string`	--
itemRangeText	`(min: number, max: number, total: number) => string`	--
pageInputDisabled	`boolean`	false
pageSize	`number`	10
pageSizes	`number[]`	--
pagesUnknown	`boolean`	false
pageText	`(page: number) => string`	--
pageRangeText	`(current: number, total: number) => string`	--
id	`string`	--

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

on:update

PaginationNav

Import path

import { PaginationNav } from "carbon-components-svelte";

Props

Prop name	Type	Default value
page	`number`	0
total	`number`	10
shown	`number`	10
loop	`boolean`	false
forwardText	`string`	"Next page"
backwardText	`string`	"Previous page"

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

on:click:button--previous
on:click:button--next
on:change

PaginationSkeleton

Import path

import { PaginationSkeleton } from "carbon-components-svelte";

Props

No exported props.

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

PasswordInput

Import path

import { PasswordInput } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`"sm" \| "xl"`	--
value	`string`	""
type	`string`	"password"
placeholder	`string`	""
hidePasswordLabel	`string`	"Hide password"
showPasswordLabel	`string`	"Show password"
tooltipAlignment	`"start" \| "center" \| "end"`	--
tooltipPosition	`"top" \| "right" \| "bottom" \| "left"`	--
light	`boolean`	false
disabled	`boolean`	false
helperText	`string`	""
labelText	`string`	""
hideLabel	`boolean`	false
invalid	`boolean`	false
invalidText	`string`	""
id	`string`	--
name	`string`	--
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:input
on:keydown
on:focus
on:blur

Dispatched events

No dispatched events.

ProgressIndicator

Import path

import { ProgressIndicator } from "carbon-components-svelte";

Props

Prop name	Type	Default value
currentIndex	`number`	0
vertical	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:change

ProgressIndicatorSkeleton

Import path

import { ProgressIndicatorSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
vertical	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ProgressStep

Import path

import { ProgressStep } from "carbon-components-svelte";

Props

Prop name	Type	Default value
complete	`boolean`	false
current	`boolean`	false
disabled	`boolean`	false
invalid	`boolean`	false
description	`string`	""
label	`string`	""
secondaryLabel	`string`	""
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

on:mouseover
on:mouseenter
on:mouseleave
on:keydown

Dispatched events

No dispatched events.

RadioButton

Import path

import { RadioButton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
value	`string`	""
checked	`boolean`	false
disabled	`boolean`	false
labelPosition	`"right" \| "left"`	"right"
labelText	`string`	""
hideLabel	`boolean`	false
id	`string`	--
name	`string`	""
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:change

Dispatched events

No dispatched events.

RadioButtonGroup

Import path

import { RadioButtonGroup } from "carbon-components-svelte";

Props

Prop name	Type	Default value
selected	`string`	--
disabled	`boolean`	false
labelPosition	`"right" \| "left"`	"right"
orientation	`"horizontal" \| "vertical"`	"horizontal"

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:change

RadioButtonSkeleton

Import path

import { RadioButtonSkeleton } from "carbon-components-svelte";

Props

No exported props.

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

RadioTile

Import path

import { RadioTile } from "carbon-components-svelte";

Props

Prop name	Type	Default value
checked	`boolean`	false
light	`boolean`	false
value	`string`	""
tabindex	`string`	"0"
iconDescription	`string`	"Tile checkmark"
id	`string`	--
name	`string`	""

Slots

<slot>...</slot>

Forwarded events

on:change
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown

Dispatched events

No dispatched events.

Row

Import path

import { Row } from "carbon-components-svelte";

Props

Prop name	Type	Default value
as	`boolean`	false
condensed	`boolean`	false
narrow	`boolean`	false
noGutter	`boolean`	false
noGutterLeft	`boolean`	false
noGutterRight	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Search

Import path

import { Search } from "carbon-components-svelte";

Props

Prop name	Type	Default value
small	`boolean`	false
size	`"sm" \| "lg"`	--
skeleton	`boolean`	false
light	`boolean`	false
value	`string`	""
type	`string`	"text"
placeholder	`string`	"Search..."
autocomplete	`"on" \| "off"`	"off"
autofocus	`boolean`	false
closeButtonLabelText	`string`	"Clear search input"
labelText	`string`	""
id	`string`	--
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:input

Dispatched events

No dispatched events.

SearchSkeleton

Import path

import { SearchSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
small	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Select

Import path

import { Select } from "carbon-components-svelte";

Props

Prop name	Type	Default value
selected	`string`	--
size	`"sm" \| "xl"`	--
inline	`boolean`	false
light	`boolean`	false
disabled	`boolean`	false
id	`string`	--
name	`string`	--
invalid	`boolean`	false
invalidText	`string`	""
helperText	`string`	""
noLabel	`boolean`	false
labelText	`string`	""
hideLabel	`boolean`	false
ref	`null \| HTMLSelectElement`	null

Slots

<slot>...</slot>

Forwarded events

on:blur

Dispatched events

on:change

SelectItem

Import path

import { SelectItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
value	`string`	""
text	`string`	""
hidden	`boolean`	false
disabled	`boolean`	false

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

SelectItemGroup

Import path

import { SelectItemGroup } from "carbon-components-svelte";

Props

Prop name	Type	Default value
disabled	`boolean`	false
label	`string`	"Provide label"

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

SelectSkeleton

Import path

import { SelectSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
hideLabel	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

SelectableTile

Import path

import { SelectableTile } from "carbon-components-svelte";

Props

Prop name	Type	Default value
selected	`boolean`	false
light	`boolean`	false
title	`string`	"title"
value	`string`	"value"
tabindex	`string`	"0"
iconDescription	`string`	"Tile checkmark"
id	`string`	--
name	`string`	""
ref	`null \| HTMLInputElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown

Dispatched events

No dispatched events.

SideNav

Import path

import { SideNav } from "carbon-components-svelte";

Props

Prop name	Type	Default value
fixed	`boolean`	false
ariaLabel	`string`	--
isOpen	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

SideNavItems

Import path

import { SideNavItems } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

SideNavLink

Import path

import { SideNavLink } from "carbon-components-svelte";

Props

Prop name	Type	Default value
isSelected	`boolean`	false
href	`string`	--
text	`string`	--
icon	`{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }`	--

Slots

No slots.

Forwarded events

on:click

Dispatched events

No dispatched events.

SideNavMenu

Import path

import { SideNavMenu } from "carbon-components-svelte";

Props

Prop name	Type	Default value
expanded	`boolean`	false
text	`string`	--
icon	`{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }`	--

Slots

<slot>...</slot>

Forwarded events

on:click

Dispatched events

No dispatched events.

SideNavMenuItem

Import path

import { SideNavMenuItem } from "carbon-components-svelte";

Props

Prop name	Type	Default value
isSelected	`boolean`	--
href	`string`	--
text	`string`	--

Slots

No slots.

Forwarded events

on:click

Dispatched events

No dispatched events.

SkeletonPlaceholder

Import path

import { SkeletonPlaceholder } from "carbon-components-svelte";

Props

No exported props.

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

SkeletonText

Import path

import { SkeletonText } from "carbon-components-svelte";

Props

Prop name	Type	Default value
lines	`number`	3
heading	`boolean`	false
paragraph	`boolean`	false
width	`string`	"100%"

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

SkipToContent

Import path

import { SkipToContent } from "carbon-components-svelte";

Props

Prop name	Type	Default value
href	`string`	"#main-content"
tabindex	`string`	"0"

Slots

<slot>...</slot>

Forwarded events

on:click

Dispatched events

No dispatched events.

Slider

Import path

import { Slider } from "carbon-components-svelte";

Props

Prop name	Type	Default value
value	`string`	""
max	`number`	100
maxLabel	`string`	""
min	`number`	0
minLabel	`string`	""
step	`number`	1
stepMultiplier	`number`	4
required	`boolean`	false
inputType	`string`	"number"
disabled	`boolean`	false
light	`boolean`	false
hideTextInput	`boolean`	false
id	`string`	--
invalid	`boolean`	false
labelText	`string`	""
name	`string`	""
ref	`null \| HTMLElement`	null

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:change

SliderSkeleton

Import path

import { SliderSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
hideLabel	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

StructuredList

Import path

import { StructuredList } from "carbon-components-svelte";

Props

Prop name	Type	Default value
selected	`string`	--
border	`boolean`	false
selection	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:change

StructuredListBody

Import path

import { StructuredListBody } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

StructuredListCell

Import path

import { StructuredListCell } from "carbon-components-svelte";

Props

Prop name	Type	Default value
head	`boolean`	false
noWrap	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

StructuredListHead

Import path

import { StructuredListHead } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

StructuredListInput

Import path

import { StructuredListInput } from "carbon-components-svelte";

Props

Prop name	Type	Default value
checked	`boolean`	false
title	`string`	"title"
value	`string`	"value"
id	`string`	--
name	`string`	""
ref	`null \| HTMLInputElement`	null

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

StructuredListRow

Import path

import { StructuredListRow } from "carbon-components-svelte";

Props

Prop name	Type	Default value
head	`boolean`	false
label	`boolean`	false
tabindex	`string`	"0"

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown

Dispatched events

No dispatched events.

StructuredListSkeleton

Import path

import { StructuredListSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
rows	`number`	5
border	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Switch

Import path

import { Switch } from "carbon-components-svelte";

Props

Prop name	Type	Default value
text	`string`	"Provide text"
selected	`boolean`	false
disabled	`boolean`	false
id	`string`	--
ref	`null \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown

Dispatched events

No dispatched events.

Tab

Import path

import { Tab } from "carbon-components-svelte";

Props

Prop name	Type	Default value
label	`string`	""
href	`string`	"#"
disabled	`boolean`	false
tabindex	`string`	"0"
id	`string`	--
ref	`null \| HTMLAnchorElement`	null

Slots

<slot>...</slot>

Forwarded events

on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

TabContent

Import path

import { TabContent } from "carbon-components-svelte";

Props

Prop name	Type	Default value
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Table

Import path

import { Table } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`"compact" \| "short" \| "tall"`	--
zebra	`boolean`	false
useStaticWidth	`boolean`	false
shouldShowBorder	`boolean`	false
sortable	`boolean`	false
stickyHeader	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TableBody

Import path

import { TableBody } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TableCell

Import path

import { TableCell } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

TableContainer

Import path

import { TableContainer } from "carbon-components-svelte";

Props

Prop name	Type	Default value
title	`string`	""
description	`string`	""
stickyHeader	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TableHead

Import path

import { TableHead } from "carbon-components-svelte";

Props

No exported props.

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

TableHeader

Import path

import { TableHeader } from "carbon-components-svelte";

Props

Prop name	Type	Default value
scope	`string`	"col"
translateWithId	`() => string`	--
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

on:mouseover
on:mouseenter
on:mouseleave
on:click

Dispatched events

No dispatched events.

TableRow

Import path

import { TableRow } from "carbon-components-svelte";

Props

Prop name	Type	Default value
isSelected	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Tabs

Import path

import { Tabs } from "carbon-components-svelte";

Props

Prop name	Type	Default value
selected	`number`	0
type	`"default" \| "container"`	"default"
iconDescription	`string`	"Show menu options"
triggerHref	`string`	"#"

Slots

<slot>...</slot>

Forwarded events

on:keypress
on:click

Dispatched events

on:change

TabsSkeleton

Import path

import { TabsSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
count	`number`	4

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Tag

Import path

import { Tag } from "carbon-components-svelte";

Props

Prop name	Type	Default value
type	`"red" \| "magenta" \| "purple" \| "blue" \| "cyan" \| "teal" \| "green" \| "gray" \| "cool-gray" \| "warm-gray" \| "high-contrast"`	--
filter	`boolean`	false
disabled	`boolean`	false
skeleton	`boolean`	false
title	`string`	"Clear filter"
id	`string`	--

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

TagSkeleton

Import path

import { TagSkeleton } from "carbon-components-svelte";

Props

No exported props.

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

TextArea

Import path

import { TextArea } from "carbon-components-svelte";

Props

Prop name	Type	Default value
value	`string`	""
placeholder	`string`	""
cols	`number`	50
rows	`number`	4
light	`boolean`	false
disabled	`boolean`	false
helperText	`string`	""
labelText	`string`	""
hideLabel	`boolean`	false
invalid	`boolean`	false
invalidText	`string`	""
id	`string`	--
name	`string`	--
ref	`null \| HTMLTextAreaElement`	null

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:input
on:focus
on:blur

Dispatched events

No dispatched events.

TextAreaSkeleton

Import path

import { TextAreaSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
hideLabel	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

TextInput

Import path

import { TextInput } from "carbon-components-svelte";

Props

Prop name	Type	Default value
size	`"sm" \| "xl"`	--
value	`string`	""
type	`string`	""
placeholder	`string`	""
light	`boolean`	false
disabled	`boolean`	false
helperText	`string`	""
id	`string`	--
name	`string`	--
labelText	`string`	""
hideLabel	`boolean`	false
invalid	`boolean`	false
invalidText	`string`	""
ref	`null \| HTMLInputElement`	null
required	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:input
on:keydown
on:focus
on:blur

Dispatched events

No dispatched events.

TextInputSkeleton

Import path

import { TextInputSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
hideLabel	`boolean`	false

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Tile

Import path

import { Tile } from "carbon-components-svelte";

Props

Prop name	Type	Default value
light	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

TileGroup

Import path

import { TileGroup } from "carbon-components-svelte";

Props

Prop name	Type	Default value
selected	`string`	--
disabled	`boolean`	false
legend	`string`	""

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

on:select

TimePicker

Import path

import { TimePicker } from "carbon-components-svelte";

Props

Prop name	Type	Default value
value	`string`	""
type	`string`	"text"
placeholder	`string`	"hh=mm"
pattern	`string`	"(1[012]
maxlength	`number`	5
light	`boolean`	false
disabled	`boolean`	false
labelText	`string`	""
hideLabel	`boolean`	false
invalid	`boolean`	false
invalidText	`string`	""
id	`string`	--
name	`string`	--
ref	`null \| HTMLInputElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:input
on:focus
on:blur

Dispatched events

No dispatched events.

TimePickerSelect

Import path

import { TimePickerSelect } from "carbon-components-svelte";

Props

Prop name	Type	Default value
value	`string`	""
disabled	`boolean`	false
iconDescription	`string`	"Open list of options"
labelText	`string`	""
hideLabel	`boolean`	false
id	`string`	--
name	`string`	--
ref	`null \| HTMLSelectElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ToastNotification

Import path

import { ToastNotification } from "carbon-components-svelte";

Props

Prop name	Type	Default value
notificationType	`"toast" \| "inline"`	"toast"
kind	`"error" \| "info" \| "info-square" \| "success" \| "warning" \| "warning-alt"`	"error"
lowContrast	`boolean`	false
timeout	`number`	0
role	`string`	"alert"
title	`string`	"Title"
subtitle	`string`	""
caption	`string`	"Caption"
iconDescription	`string`	"Closes notification"
hideCloseButton	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

on:close

Toggle

Import path

import { Toggle } from "carbon-components-svelte";

Props

Prop name	Type	Default value
toggled	`boolean`	false
disabled	`boolean`	false
labelA	`string`	"Off"
labelB	`string`	"On"
labelText	`string`	""
id	`string`	--
name	`string`	--

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:keyup
on:focus
on:blur

Dispatched events

No dispatched events.

ToggleSkeleton

Import path

import { ToggleSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
labelText	`string`	""
id	`string`	--

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

ToggleSmall

Import path

import { ToggleSmall } from "carbon-components-svelte";

Props

Prop name	Type	Default value
toggled	`boolean`	false
disabled	`boolean`	false
labelA	`string`	"Off"
labelB	`string`	"On"
labelText	`string`	""
id	`string`	--
name	`string`	--

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:keyup
on:focus
on:blur

Dispatched events

No dispatched events.

ToggleSmallSkeleton

Import path

import { ToggleSmallSkeleton } from "carbon-components-svelte";

Props

Prop name	Type	Default value
labelText	`string`	""
id	`string`	--

Slots

No slots.

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

Import path

import { Tooltip } from "carbon-components-svelte";

Props

Prop name	Type	Default value
direction	`"top" \| "right" \| "bottom" \| "left"`	"bottom"
open	`boolean`	false
hideIcon	`boolean`	false
icon	`typeof import("carbon-icons-svelte/lib/Add16").default`	--
iconDescription	`string`	""
iconName	`string`	""
tabindex	`string`	"0"
tooltipId	`string`	--
triggerId	`string`	--
triggerText	`string`	""
ref	`null \| HTMLElement`	null
refTooltip	`null \| HTMLElement`	null
refIcon	`null \| HTMLElement`	null

Slots

<slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

TooltipDefinition

Import path

import { TooltipDefinition } from "carbon-components-svelte";

Props

Prop name	Type	Default value
tooltipText	`string`	""
align	`"start" \| "center" \| "end"`	"center"
direction	`"top" \| "bottom"`	"bottom"
id	`string`	--
ref	`null \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:focus

Dispatched events

No dispatched events.

TooltipIcon

Import path

import { TooltipIcon } from "carbon-components-svelte";

Props

Prop name	Type	Default value
tooltipText	`string`	""
align	`"start" \| "center" \| "end"`	"center"
direction	`"top" \| "right" \| "bottom" \| "left"`	"bottom"
id	`string`	--
ref	`null \| HTMLButtonElement`	null

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave
on:focus

Dispatched events

No dispatched events.

UnorderedList

Import path

import { UnorderedList } from "carbon-components-svelte";

Props

Prop name	Type	Default value
nested	`boolean`	false

Slots

<slot>...</slot>

Forwarded events

on:click
on:mouseover
on:mouseenter
on:mouseleave

Dispatched events

No dispatched events.

130 KiB Raw Blame History

Component Index

Accordion

Import path

Props

Slots

Forwarded events

Dispatched events

AccordionItem

Import path

Props

Slots

Forwarded events

Dispatched events

AccordionSkeleton

Import path

Props

Slots

Forwarded events

Dispatched events

Breadcrumb

Import path

Props

Slots

Forwarded events

Dispatched events

BreadcrumbItem

Import path

Props

Slots

Forwarded events

Dispatched events

BreadcrumbSkeleton

Import path

Props

Slots

Forwarded events

Dispatched events

Button

Import path

Props

Slots

Forwarded events

Dispatched events

ButtonSet

Import path

Props

Slots

Forwarded events

Dispatched events

ButtonSkeleton

Import path

Props

Slots

Forwarded events

Dispatched events

Checkbox

Import path

Props

Slots

Forwarded events

Dispatched events

CheckboxSkeleton

Import path

Props

Slots

Forwarded events

Dispatched events

ClickableTile

Import path

Props

Slots

Forwarded events

Dispatched events

CodeSnippet

Import path

Props

Slots

Forwarded events

Dispatched events

130 KiB

Raw Blame History