mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity
carbon-components-svelte/COMPONENT_INDEX.md

198 KiB
Raw Blame History

Component Index

148 components exported from carbon-components-svelte 0.17.0

Accordion

Import path

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

Props

Prop name Type Default value Description
align "start" | "end" "end" Specify alignment of accordion item chevron icon
size "sm" | "xl" -- Specify the size of the accordion
disabled boolean false Set to true to disable the accordion
skeleton boolean false Set to true to display the skeleton state

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 Description
title string "title" Specify the title of the accordion item heading. Alternatively, use the named slot "title" (e.g.
...
)
open boolean false Set to true to open the first accordion item
disabled boolean false Set to true to disable the accordion item
iconDescription string "Expand/Collapse" Specify the ARIA label for the accordion item chevron icon

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 Description
count number 4 Specify the number of accordion items to render
align "start" | "end" "end" Specify alignment of accordion item chevron icon
size "sm" | "xl" -- Specify the size of the accordion
open boolean true Set to false to close the first accordion item

Slots

No slots.

Forwarded events

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

Dispatched events

No dispatched events.

AspectRatio

Import path

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

Props

Prop name Type Default value Description
ratio "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" "2x1" Specify the aspect ratio

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Breadcrumb

Import path

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

Props

Prop name Type Default value Description
noTrailingSlash boolean false Set to true to hide the breadcrumb trailing slash
skeleton boolean false Set to true to display skeleton state

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 Description
href string -- Set the href to use an anchor link
isCurrentPage boolean false Set to true if the breadcrumb item represents the current page

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 Description
noTrailingSlash boolean false Set to true to hide the breadcrumb trailing slash
count number 3 Specify the number of breadcrumb items to render

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 Description
kind "primary" | "secondary" | "tertiary" | "ghost" | "danger" "primary" Specify the kind of button
size "default" | "field" | "small" "default" Specify the size of button
hasIconOnly boolean false Set to true for the icon-only variant
icon typeof import("carbon-icons-svelte/lib/Add16").default -- Specify the icon from carbon-icons-svelte to render
iconDescription string -- Specify the ARIA label for the button icon
tooltipAlignment "start" | "center" | "end" -- Set the alignment of the tooltip relative to the icon. hasIconOnly must be set to true
tooltipPosition "top" | "right" | "bottom" | "left" -- Set the position of the tooltip relative to the icon
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. )
skeleton boolean false Set to true to display the skeleton state
disabled boolean false Set to true to disable the button
href string -- Set the href to use an anchor link
tabindex string "0" Specify the tabindex
type string "button" Specify the type attribute for the button element
ref null | HTMLAnchorElement | HTMLButtonElement null Obtain a reference to the HTML element

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 Description
stacked boolean false Set to true to stack the buttons vertically

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 Description
href string -- Set the href to use an anchor link
size "default" | "field" | "small" "default" Specify the size of button skeleton
small boolean false Set to true to use the small variant

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 Description
checked boolean false Specify whether the checkbox is checked
indeterminate boolean false Specify whether the checkbox is indeterminate
skeleton boolean false Set to true to display the skeleton state
readonly boolean false Set to true for the checkbox to be read-only
disabled boolean false Set to true to disable the checkbox
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
name string "" Set a name for the input element
title string -- Specify the title attribute for the label element
id string -- Set an id for the input label
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
clicked boolean false Set to true to click the tile
light boolean false Set to true to enable the light variant
href string -- Set the href

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 Description
type "single" | "inline" | "multi" "single" Set the type of code snippet
code string -- Set the code snippet text. Alternatively, use the default slot (e.g. {code})
expanded boolean false Set to true to expand a multi-line code snippet (type="multi")
hideCopyButton boolean false Set to true to hide the copy button
wrapText boolean false Set to true to wrap the text. Note that type must be "multi"
light boolean false Set to true to enable the light variant
skeleton boolean false Set to true to display the skeleton state
copyButtonDescription string -- Specify the ARIA label for the copy button icon
copyLabel string -- Specify the ARIA label of the copy button
feedback string "Copied!" Specify the feedback text displayed when clicking the snippet
feedbackTimeout number 2000 Set the timeout duration (ms) to display feedback text
showLessText string "Show less" Specify the show less text. type must be "multi"
showMoreText string "Show more" Specify the show more text. type must be "multi"
showMoreLess boolean false Set to true to enable the show more/less button
id string -- Set an id for the code element
ref null | HTMLPreElement null Obtain a reference to the pre HTML element

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 Description
type "single" | "inline" | "multi" "single" Set the type of code snippet

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 Description
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. <article {...props}>...)
noGutter boolean false Set to true to remove the gutter
noGutterLeft boolean false Set to true to remove the left gutter
noGutterRight boolean false Set to true to remove the right gutter
aspectRatio "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" -- Specify the aspect ratio of the column
sm ColumnBreakpoint -- Set the small breakpoint
md ColumnBreakpoint -- Set the medium breakpoint
lg ColumnBreakpoint -- Set the large breakpoint
xlg ColumnBreakpoint -- Set the extra large breakpoint
max ColumnBreakpoint -- Set the maximum breakpoint

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 Description
items ComboBoxItem[] -- Set the combobox items
itemToString (item: ComboBoxItem) => string -- Override the display of a combobox item
selectedIndex number -- Set the selected item by value index
value string "" Specify the selected combobox value
size "sm" | "xl" -- Set the size of the combobox
disabled boolean false Set to true to disable the combobox
titleText string "" Specify the title text of the combobox
placeholder string "" Specify the placeholder text
helperText string "" Specify the helper text
invalidText string "" Specify the invalid state text
invalid boolean false Set to true to indicate an invalid state
light boolean false Set to true to enable the light variant
open boolean false Set to true to open the combobox menu dropdown
shouldFilterItem (item: ComboBoxItem, value: string) => boolean -- Determine if an item should be filtered given the current combobox value
translateWithId (id: any) => string -- Override the default translation ids
id string -- Set an id for the list box component
name string -- Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
size "xs" | "sm" | "lg" -- Set the size of the composed modal
open boolean false Set to true to open the modal
danger boolean false Set to true to use the danger variant
preventCloseOnClickOutside boolean false Set to true to prevent the modal from closing when clicking outside
containerClass string "" Specify a class for the inner modal
selectorPrimaryFocus string "[data-modal-primary-focus]" Specify a selector to be focused when opening the modal
ref null | HTMLElement null Obtain a reference to the top-level HTML element

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 Description
id string "main-content" Specify the id for the main element

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 Description
selectedIndex number 0 Set the selected index of the switch item
light boolean false Set to true to enable the light variant
size "sm" | "xl" -- Specify the size of the content switcher

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 Description
feedback string "Copied!" Set the feedback text shown after clicking the button
feedbackTimeout number 2000 Set the timeout duration (ms) to display feedback text
ref null | HTMLButtonElement null Obtain a reference to the button HTML element

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 Description
iconDescription string "Copy to clipboard" Set the title and ARIA label for the copy button

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 Description
headers {key: string; value: string;}[] -- Specify the data table headers
rows Object[] -- Specify the rows the data table should render. keys defined in headers are used for the row ids
size "compact" | "short" | "tall" -- Set the size of the data table
title string "" Specify the title of the data table
description string "" Specify the description of the data table
zebra boolean false Set to true to use zebra styles
sortable boolean false Set to true for the sortable variant
stickyHeader boolean false Set to true to enable a sticky header

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 Description
columns number 5 Specify the number of columns
rows number 5 Specify the number of rows
size "compact" | "short" | "tall" -- Set the size of the data table
zebra boolean false Set to true to apply zebra styles to the datatable rows
showHeader boolean true Set to false to hide the header
headers string[] -- Set the column headers. If headers has one more items, count is ignored
showToolbar boolean true Set to false to hide the toolbar

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 Description
datePickerType "simple" | "single" | "range" "simple" Specify the date picker type
value string "" Specify the date picker input value
appendTo HTMLElement -- Specify the element to append the calendar to
dateFormat string "m/d/Y" Specify the date format
maxDate null | string | Date null Specify the maximum date
minDate null | string | Date null Specify the minimum date
locale string "en" Specify the locale
short boolean false Set to true to use the short variant
light boolean false Set to true to enable the light variant
id string -- Set an id for the date picker element

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 Description
size "sm" | "xl" -- Set the size of the input
type string "text" Specify the input type
placeholder string "" Specify the input placeholder text
pattern string "\d{1,2}\/\d{1,2}\/\d{4}" Specify the Regular Expression for the input value
disabled boolean false Set to true to disable the input
iconDescription string "" Specify the ARIA label for the calendar icon
id string -- Set an id for the input element
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text
name string -- Set a name for the input element
ref null | HTMLInputElement null Obtain a reference to the input HTML element

Slots

No slots.

Forwarded events

  • on:input
  • on:keydown
  • on:blur

Dispatched events

No dispatched events.

DatePickerSkeleton

Import path

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

Props

Prop name Type Default value Description
range boolean false Set to true to use the range variant
id string -- Set an id to be used by the label element

Slots

No slots.

Forwarded events

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

Dispatched events

No dispatched events.

Dropdown

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 Description
items DropdownItem[] -- Set the dropdown items
itemToString (item: DropdownItem) => string -- Override the display of a dropdown item
selectedIndex number -- Specify the selected item index
type "default" | "inline" "default" Specify the type of dropdown
size "sm" | "lg" | "xl" -- Specify the size of the dropdown field
open boolean false Set to true to open the dropdown
inline boolean false Set to true to use the inline variant
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the dropdown
titleText string "" Specify the title text
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text
helperText string "" Specify the helper text
label string -- Specify the list box label
translateWithId (id: any) => string -- Override the default translation ids
id string -- Set an id for the list box component
name string -- Specify a name attribute for the list box
ref null | HTMLButtonElement null Obtain a reference to the button HTML element

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

  • on:select

DropdownSkeleton

Import path

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

Props

Prop name Type Default value Description
inline boolean false Set to true to use the inline variant

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 Description
expanded boolean false Set to true to expand the tile
light boolean false Set to true to enable the light variant
tileMaxHeight number 0 Specify the max height of the tile (number of pixels)
tilePadding number 0 Specify the padding of the tile (number of pixels)
tileCollapsedIconText string "Interact to expand Tile" Specify the icon text of the collapsed tile
tileExpandedIconText string "Interact to collapse Tile" Specify the icon text of the expanded tile
tabindex string "0" Specify the tabindex
id string -- Set an id for the top-level div element
ref null | HTMLElement null Obtain a reference to the input HTML element

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 Description
status "uploading" | "edit" | "complete" "uploading" Specify the file uploader status
accept string[] -- Specify the accepted file types
files string[] -- Obtain the uploaded file names
multiple boolean false Set to true to allow multiple files
clearFiles (constant) () => any -- Override the default behavior of clearing the array of uploaded files
labelDescription string "" Specify the label description
labelTitle string "" Specify the label title
kind "primary" | "secondary" | "tertiary" | "ghost" | "danger" "primary" Specify the kind of file uploader button
buttonLabel string "" Specify the button label
iconDescription string "Provide icon description" Specify the ARIA label used for the status icons
name string "" Specify a name attribute for the file button uploader input

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 Description
accept string[] -- Specify the accepted file types
multiple boolean false Set to true to allow multiple files
disabled boolean false Set to true to disable the input
disableLabelChanges boolean false Set to true to disable label changes
kind "primary" | "secondary" | "tertiary" | "ghost" | "danger" "primary" Specify the kind of file uploader button
labelText string "Add file" Specify the label text
role string "button" Specify the label role
tabindex string "0" Specify tabindex attribute
id string -- Set an id for the input element
name string "" Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
accept string[] -- Specify the accepted file types
multiple boolean false Set to true to allow multiple files
validateFiles (files: Files) => Files -- Override the default behavior of validating uploaded files. The default behavior does not validate files
labelText string "Add file" Specify the label text
role string "button" Specify the role attribute of the drop container
disabled boolean false Set to true to disable the input
tabindex string "0" Specify tabindex attribute
id string -- Set an id for the input element
name string "" Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
status "uploading" | "edit" | "complete" "uploading" Specify the file uploader status
iconDescription string "" Specify the ARIA label used for the status icons
invalid boolean false Set to true to indicate an invalid state
errorSubject string "" Specify the error subject text
errorBody string "" Specify the error body text
id string -- Set an id for the top-level element
name string "" Specify the file uploader name

Slots

No slots.

Forwarded events

  • on:mouseover
  • on:mouseenter
  • on:mouseleave

Dispatched events

  • on:delete

FileUploaderSkeleton

Import path

import { FileUploaderSkeleton } 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.

Filename

Import path

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

Props

Prop name Type Default value Description
status "uploading" | "edit" | "complete" "uploading" Specify the file name status
iconDescription string "" Specify the ARIA label used for the status icons
invalid boolean false Set to true to indicate an invalid state

Slots

No slots.

Forwarded events

  • on:click
  • on:keydown

Dispatched events

No dispatched events.

FluidForm

Import path

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

Props

No exported props.

Slots

  • <slot>...</slot>

Forwarded events

No forwarded events.

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 Description
invalid boolean false Set to true to indicate an invalid state
message boolean false Set to true to render a form requirement
messageText string "" Specify the message text
legendText string "" Specify the legend text

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 Description
id string -- Set an id to be used by the label element

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 Description
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. <header {...props}>...)
condensed boolean false Set to true to use the condensed variant
narrow boolean false Set to true to use the narrow variant
fullWidth boolean false Set to true to use the fullWidth variant
noGutter boolean false Set to true to remove the gutter
noGutterLeft boolean false Set to true to remove the left gutter
noGutterRight boolean false Set to true to remove the right gutter

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 Description
expandedByDefault boolean true Set to false to hide the side nav by default
isSideNavOpen boolean false Set to true to open the side nav
uiShellAriaLabel string -- Specify the ARIA label for the header
href string -- Specify the href attribute
company string -- Specify the company name
platformName string -- Specify the platform name. Alternatively, use the named slot "platform" (e.g. ...)
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element

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 Description
isOpen boolean false Set to true to open the panel
icon { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } -- Specify the icon props
text string -- Specify the text. Alternatively, use the named slot "text" (e.g.
...
)
ref null | HTMLButtonElement null Obtain a reference to the button HTML element

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 Description
linkIsActive boolean false Set to true to use the active state
href string -- Specify the href attribute
icon { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } -- Specify the icon props
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element

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 Description
searchIsActive boolean false Set to true to focus the search

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 Description
isActive boolean false Set to true to use the active variant
icon typeof import("carbon-icons-svelte/lib/Add16").default -- Specify the icon to render
ref null | HTMLButtonElement null Obtain a reference to the HTML button element

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 Description
ariaLabel string -- Specify the ARIA label for the nav

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 Description
href string -- Specify the href attribute
text string -- Specify the text
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element

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 Description
expanded boolean false Set to true to toggle the expanded state
href string "/" Specify the href attribute
text string -- Specify the text
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element
iconDescription string "Expand/Collapse" Specify the ARIA label for the chevron icon

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 Description
href string -- Specify the href attribute
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element

Slots

  • <slot>...</slot>

Forwarded events

  • on:click

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 Description
render typeof import("carbon-icons-svelte/lib/Add16").default -- Specify the icon from carbon-icons-svelte to render. Icon size must be 16px (e.g. Add16, Task16)
skeleton boolean false Set to true to display the skeleton state

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 Description
size number 16 Set the size of the icon

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 Description
status "active" | "inactive" | "finished" | "error" "active" Set the loading status
description string -- Set the loading description
iconDescription string -- Specify the ARIA label for the loading icon
successDelay number 1500 Specify the timeout delay (ms) after status is set to "success"

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 Description
notificationType "toast" | "inline" "inline" Set the type of notification
kind "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" "error" Specify the kind of notification
lowContrast boolean false Set to true to use the low contrast variant
timeout number 0 Set the timeout duration (ms) to hide the notification after opening it
role string "alert" Set the role attribute
title string "Title" Specify the title text
subtitle string "" Specify the subtitle text
hideCloseButton boolean false Set to true to hide the close button
iconDescription string "Closes notification" Specify the ARIA label for the icon

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 Description
href string -- Specify the href value
inline boolean false Set to true to use the inline variant
disabled boolean false Set to true to disable the checkbox
visited boolean false Set to true to allow visited styles
ref null | HTMLAnchorElement | HTMLParagraphElement null Obtain a reference to the top-level HTML element

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 Description
size "sm" | "xl" -- Set the size of the list box
type "default" | "inline" "default" Set the type of the list box
open boolean false Set to true to open the list box
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the list box
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text

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 Description
disabled boolean false Set to true to disable the list box field
role string "combobox" Specify the role attribute
tabindex string "-1" Specify the tabindex
translationIds (constant) { close: "close"; open: "open"; } { close: "close", open: "open" } Default translation ids
translateWithId (id: ListBoxFieldTranslationId) => string -- Override the default translation ids
id string -- Set an id for the top-level element
ref null | HTMLElement null Obtain a reference to the top-level HTML element

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 Description
id string -- Set an id for the top-level element
ref null | HTMLDivElement null Obtain a reference to the input HTML element

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 Description
open boolean false Set to true to open the list box menu icon
translationIds (constant) { close: "close"; open: "open" } { close: "close", open: "open" } Default translation ids
translateWithId (id: ListBoxMenuIconTranslationId) => string -- Override the default translation ids

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 Description
active boolean false Set to true to enable the active state
highlighted boolean false Set to true to enable the highlighted state

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 Description
selectionCount any -- Specify the number of selected items
disabled boolean false Set to true to disable the list box selection
translationIds (constant) { clearAll: "clearAll"; clearSelection: "clearSelection" } { clearAll: "clearAll", clearSelection: "clearSelection", } Default translation ids
translateWithId (id: ListBoxSelectionTranslationId) => string -- Override the default translation ids
ref null | HTMLElement null Obtain a reference to the top-level HTML element

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 Description
small boolean false Set to true to use the small variant
active boolean true Set to false to disable the active state
withOverlay boolean true Set to false to disable the overlay
description string "Active loading indicator" Specify the label description
id string -- Set an id for the label element

Slots

No slots.

Forwarded events

No forwarded events.

Dispatched events

No dispatched events.

Modal

Import path

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

Props

Prop name Type Default value Description
size "xs" | "sm" | "lg" -- Set the size of the modal
open boolean false Set to true to open the modal
danger boolean false Set to true to use the danger variant
alert boolean false Set to true to enable alert mode
passiveModal boolean false Set to true to use the passive variant
modalHeading string -- Specify the modal heading
modalLabel string -- Specify the modal label
modalAriaLabel string -- Specify the ARIA label for the modal
iconDescription string "Close the modal" Specify the ARIA label for the close icon
hasForm boolean false Set to true if the modal contains form elements
hasScrollingContent boolean false Set to true if the modal contains scrolling content
primaryButtonText string "" Specify the primary button text
primaryButtonDisabled boolean false Set to true to disable the primary button
shouldSubmitOnEnter boolean true Set to true for the primary button to be triggered when pressing "Enter"
secondaryButtonText string "" Specify the secondary button text
selectorPrimaryFocus string "[data-modal-primary-focus]" Specify a selector to be focused when opening the modal
preventCloseOnClickOutside boolean false Set to true to prevent the modal from closing when clicking outside
id string -- Set an id for the top-level element
ref null | HTMLElement null Obtain a reference to the top-level HTML element

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 Description
hasForm boolean false Set to true if the modal contains form elements
hasScrollingContent boolean false Set to true if the modal contains scrolling content

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 Description
primaryButtonText string "" Specify the primary button text
primaryButtonDisabled boolean false Set to true to disable the primary button
primaryClass string -- Specify a class for the primary button
secondaryButtonText string "" Specify the secondary button text
secondaryClass string -- Specify a class for the secondary button
danger boolean false Set to true to use the danger variant

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 Description
title string "" Specify the modal title
label string "" Specify the modal label
labelClass string "" Specify the label class
titleClass string "" Specify the title class
closeClass string "" Specify the close class
closeIconClass string "" Specify the close icon class
iconDescription string "Close" Specify the ARIA label for the close icon

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 Description
items MultiSelectItem[] -- Set the multiselect items
itemToString (item: MultiSelectItem) => string -- Override the display of a multiselect item
selectedIds MultiSelectItemId[] -- Set the selected ids
value string "" Specify the multiselect value
size "sm" | "lg" | "xl" -- Set the size of the combobox
type "default" | "inline" "default" Specify the type of multiselect
selectionFeedback "top" | "fixed" | "top-after-reopen" "top-after-reopen" Specify the selection feedback after selecting items
disabled boolean false Set to true to disable the dropdown
filterable boolean false Set to true to filter items
filterItem (item: MultiSelectItem, value: string) => string -- Override the filtering logic. The default filtering is an exact string comparison
open boolean false Set to true to open the dropdown
light boolean false Set to true to enable the light variant
locale string "en" Specify the locale
placeholder string "" Specify the placeholder text
sortItem (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem -- Override the sorting logic. The default sorting compare the item text value
translateWithId (id: any) => string -- Override the default translation ids
titleText string "" Specify the title text
useTitleInItem boolean false Set to true to pass the item to itemToString in the checkbox
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text
helperText string "" Specify the helper text
label string "" Specify the list box label
id string -- Set an id for the list box component
name string -- Specify a name attribute for the select

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 Description
notificationType "toast" | "inline" "toast" Set the type of notification
renderIcon typeof import("carbon-icons-svelte/lib/Add16").default -- Specify the icon from carbon-icons-svelte to render
title string -- Specify the title of the icon
iconDescription string "Close icon" Specify the ARIA label for the 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 Description
kind "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" "error" Specify the kind of notification icon
notificationType "toast" | "inline" "toast" Set the type of notification
iconDescription string "Closes notification" Specify the ARIA label for the icon

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 Description
notificationType "toast" | "inline" "toast" Set the type of notification
title string "Title" Specify the title text
subtitle string "" Specify the subtitle text
caption string "Caption" Specify the caption text

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 Description
size "sm" | "xl" -- Set the size of the input
value string "" Specify the input value
step number 1 Specify the step increment
max number -- Specify the maximum value
min number -- Specify the minimum value
light boolean false Set to true to enable the light variant
readonly boolean false Set to true for the input to be read-only
mobile boolean false Set to true to enable the mobile variant
allowEmpty boolean false Set to true to allow for an empty value
disabled boolean false Set to true to disable the input
iconDescription string "" Specify the ARIA label for the increment icons
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text
helperText string "" Specify the helper text
label string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
translateWithId (id: NumberInputTranslationId) => string -- Override the default translation ids
translationIds (constant) { increment: "increment"; decrement: "decrement" } { increment: "increment", decrement: "decrement", } Default translation ids
id string -- Set an id for the input element
name string -- Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
hideLabel boolean false Set to true to hide the label text

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 Description
nested boolean false Set to true to use the nested variant

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 Description
direction "top" | "bottom" "bottom" Specify the direction of the overflow menu relative to the button
open boolean false Set to true to open the menu
light boolean false Set to true to enable the light variant
flipped boolean false Set to true to flip the menu relative to the button
menuOptionsClass string -- Specify the menu options class
icon typeof import("carbon-icons-svelte/lib/Add16").default -- Specify the icon from carbon-icons-svelte to render
iconClass string -- Specify the icon class
iconDescription string "Open and close list of options" Specify the ARIA label for the icon
id string -- Set an id for the button element

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 Description
text string "Provide text" Specify the item text. Alternatively, use the default slot for a custom element
href string "" Specify the href attribute if the item is a link
primaryFocus boolean false Set to true if the item should be focused when opening the menu
disabled boolean false Set to true to disable the item
hasDivider boolean false Set to true to include a divider
danger boolean false Set to true to use the danger variant
requireTitle boolean true Set to false to omit the button title attribute
id string -- Set an id for the top-level element
ref null | HTMLAnchorElement | HTMLButtonElement null Obtain a reference to the HTML element

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 Description
page number 1 Specify the current page index
totalItems number 0 Specify the total number of items
disabled boolean false Set to true to disable the pagination
forwardText string "Next page" Specify the forward button text
backwardText string "Previous page" Specify the backward button text
itemsPerPageText string "Items per page:" Specify the items per page text
itemText (min: number, max: number) => string -- Override the item text
itemRangeText (min: number, max: number, total: number) => string -- Override the item range text
pageInputDisabled boolean false Set to true to disable the page input
pageSizeInputDisabled boolean false Set to true to disable the page size input
pageSize number 10 Specify the number of items to display in a page
pageSizes number[] -- Specify the available page sizes
pagesUnknown boolean false Set to true if the number of pages is unknown
pageText (page: number) => string -- Override the page text
pageRangeText (current: number, total: number) => string -- Override the page range text
id string -- Set an id for the top-level element

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 Description
page number 0 Specify the current page index
total number 10 Specify the total number of pages
shown number 10 Specify the total number of pages to show
loop boolean false Set to true to loop the navigation
forwardText string "Next page" Specify the forward button text
backwardText string "Previous page" Specify the backward button text

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 Description
size "sm" | "xl" -- Set the size of the input
value string "" Specify the input value
type string "password" Specify the input type
placeholder string "" Specify the placeholder text
hidePasswordLabel string "Hide password" Specify the hide password label text
showPasswordLabel string "Show password" Specify the show password label text
tooltipAlignment "start" | "center" | "end" -- Set the alignment of the tooltip relative to the icon
tooltipPosition "top" | "right" | "bottom" | "left" -- Set the position of the tooltip relative to the icon
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the input
helperText string "" Specify the helper text
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the text for the invalid state
id string -- Set an id for the input element
name string -- Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
currentIndex number 0 Specify the current step index
vertical boolean false Set to true to use the vertical variant
spaceEqually boolean false Set to true to specify whether the progress steps should be split equally in size in the div

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 Description
vertical boolean false Set to true to use the vertical variant
count number 4 Specify the number of steps to render

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 Description
complete boolean false Set to true for the complete variant
current boolean false Set to true to use the current variant
disabled boolean false Set to true to disable the progress step
invalid boolean false Set to true to indicate an invalid state
description string "" Specify the step description
label string "" Specify the step label
secondaryLabel string "" Specify the step secondary label
id string -- Set an id for the top-level element

Slots

  • <slot>...</slot>

Forwarded events

  • on:click
  • 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 Description
value string "" Specify the value of the radio button
checked boolean false Set to true to check the radio button
disabled boolean false Set to true to disable the radio button
labelPosition "right" | "left" "right" Specify the label position
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
id string -- Set an id for the input element
name string "" Specify a name attribute for the checkbox input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
selected string -- Set the selected radio button value
disabled boolean false Set to true to disable the radio buttons
labelPosition "right" | "left" "right" Specify the label position
orientation "horizontal" | "vertical" "horizontal" Specify the orientation of the radio buttons
id string -- Set an id for the container div element

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 Description
checked boolean false Set to true to check the tile
light boolean false Set to true to enable the light variant
value string "" Specify the value of the radio input
tabindex string "0" Specify the tabindex
iconDescription string "Tile checkmark" Specify the ARIA label for the radio tile checkmark icon
id string -- Set an id for the input element
name string "" Specify a name attribute for the input

Slots

  • <slot>...</slot>

Forwarded events

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

Dispatched events

No dispatched events.

Row

Import path

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

Props

Prop name Type Default value Description
as boolean false Set to true to render a custom HTML element. Props are destructured as props in the default slot (e.g. <section {...props}>...)
condensed boolean false Set to true to use the condensed variant
narrow boolean false Set to true to use the narrow variant
noGutter boolean false Set to true to remove the gutter
noGutterLeft boolean false Set to true to remove the left gutter
noGutterRight boolean false Set to true to remove the right gutter

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 Description
small boolean false Set to true to use the small variant
size "sm" | "lg" -- Specify the size of the search input
skeleton boolean false Set to true to display the skeleton state
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the search input
value string "" Specify the value of the search input
type string "text" Specify the type attribute of the search input
placeholder string "Search..." Specify the placeholder attribute of the search input
autocomplete "on" | "off" "off" Specify the autocomplete attribute
autofocus boolean false Set to true to auto focus the search element
closeButtonLabelText string "Clear search input" Specify the close button label text
labelText string "" Specify the label text
id string -- Set an id for the input element
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
small boolean false Set to true to use the small variant

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 Description
selected string -- Specify the selected item value
size "sm" | "xl" -- Set the size of the select input
inline boolean false Set to true to use the inline variant
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the select element
id string -- Set an id for the select element
name string -- Specify a name attribute for the select element
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text
helperText string "" Specify the helper text
noLabel boolean false Set to true to not render a label
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
ref null | HTMLSelectElement null Obtain a reference to the select HTML element

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 Description
value string "" Specify the option value
text string "" Specify the option text
hidden boolean false Set to true to hide the option
disabled boolean false Set to true to disable the option

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 Description
disabled boolean false Set to true to disable the optgroup element
label string "Provide label" Specify the label attribute of the optgroup element

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 Description
hideLabel boolean false Set to true to hide the label text

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 Description
selected boolean false Set to true to select the tile
light boolean false Set to true to enable the light variant
title string "title" Specify the title of the selectable tile
value string "value" Specify the value of the selectable tile
tabindex string "0" Specify the tabindex
iconDescription string "Tile checkmark" Specify the ARIA label for the selectable tile checkmark icon
id string -- Set an id for the input element
name string "" Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
fixed boolean false Set to true to use the fixed variant
ariaLabel string -- Specify the ARIA label for the nav
isOpen boolean false Set to true to toggle the expanded state

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 Description
isSelected boolean false Set to true to select the current link
href string -- Specify the href attribute
text string -- Specify the text
icon { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } -- Specify the icon props
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element

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 Description
expanded boolean false Set to true to toggle the expanded state
text string -- Specify the text
icon { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } -- Specify the icon props
ref null | HTMLButtonElement null Obtain a reference to the HTML button element

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 Description
isSelected boolean -- Set to true to select the item
href string -- Specify the href attribute
text string -- Specify the item text
ref null | HTMLAnchorElement null Obtain a reference to the HTML anchor element

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 Description
lines number 3 Specify the number of lines to render
heading boolean false Set to true to use the heading size variant
paragraph boolean false Set to true to use the paragraph size variant
width string "100%" Specify the width of the text (% or px)

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 Description
href string "#main-content" Specify the href attribute
tabindex string "0" Specify the tabindex

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 Description
value number 0 Specify the value of the slider
max number 100 Set the maximum slider value
maxLabel string "" Specify the label for the max value
min number 0 Set the minimum slider value
minLabel string "" Specify the label for the min value
step number 1 Set the step value
stepMultiplier number 4 Set the step multiplier value
required boolean false Set to true to require a value
inputType string "number" Specify the input type
disabled boolean false Set to true to disable the slider
light boolean false Set to true to enable the light variant
hideTextInput boolean false Set to true to hide the text input
id string -- Set an id for the slider div element
invalid boolean false Set to true to indicate an invalid state
labelText string "" Specify the label text
name string "" Set a name for the slider element
ref null | HTMLElement null Obtain a reference to the HTML element

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 Description
hideLabel boolean false Set to true to hide the label text

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 Description
selected string -- Specify the selected structured list row value
border boolean false Set to true to use the bordered variant
selection boolean false Set to true to use the selection variant

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 Description
head boolean false Set to true to use as a header
noWrap boolean false Set to true to prevent wrapping

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 Description
checked boolean false Set to true to check the input
title string "title" Specify the title of the input
value string "value" Specify the value of the input
id string -- Set an id for the input element
name string "" Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
head boolean false Set to true to use as a header
label boolean false Set to true to render a label slot
tabindex string "0" Specify the tabindex

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 Description
rows number 5 Specify the number of rows
border boolean false Set to true to use the bordered variant

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 Description
text string "Provide text" Specify the switch text. Alternatively, use the named slot "text" (e.g. ...)
selected boolean false Set to true for the switch to be selected
disabled boolean false Set to true to disable the switch
id string -- Set an id for the button element
ref null | HTMLButtonElement null Obtain a reference to the button HTML element

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 Description
label string "" Specify the tab label. Alternatively, use the default slot (e.g. Label)
href string "#" Specify the href attribute
disabled boolean false Set to true to disable the tab
tabindex string "0" Specify the tabindex
id string -- Set an id for the top-level element
ref null | HTMLAnchorElement null Obtain a reference to the anchor HTML element

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 Description
id string -- Set an id for the top-level element

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 Description
size "compact" | "short" | "tall" -- Set the size of the table
zebra boolean false Set to true to use zebra styles
useStaticWidth boolean false Set to true to use static width
shouldShowBorder boolean false Set to true for the bordered variant
sortable boolean false Set to true for the sortable variant
stickyHeader boolean false Set to true to enable a sticky header

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 Description
title string "" Specify the title of the data table
description string "" Specify the description of the data table
stickyHeader boolean false Set to true to enable a sticky header

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 Description
scope string "col" Specify the scope attribute
translateWithId () => string -- Override the default id translations
id string -- Set an id for the top-level element

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 Description
isSelected boolean false Set to true to select the row

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 Description
selected number 0 Specify the selected tab index
type "default" | "container" "default" Specify the type of tabs
iconDescription string "Show menu options" Specify the ARIA label for the chevron icon
triggerHref string "#" Specify the tab trigger href attribute

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 Description
count number 4 Specify the number of tabs to render

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 Description
type "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" -- Specify the type of tag
filter boolean false Set to true to use filterable variant
disabled boolean false Set to true to disable a filterable tag
skeleton boolean false Set to true to display the skeleton state
title string "Clear filter" Set the title for the close button in a filterable tag
id string -- Set an id for the filterable tag

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 Description
value string "" Specify the textarea value
placeholder string "" Specify the placeholder text
cols number 50 Specify the number of cols
rows number 4 Specify the number of rows
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the input
helperText string "" Specify the helper text
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the text for the invalid state
id string -- Set an id for the textarea element
name string -- Specify a name attribute for the input
ref null | HTMLTextAreaElement null Obtain a reference to the textarea HTML element

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 Description
hideLabel boolean false Set to true to visually hide the label text

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 Description
size "sm" | "xl" -- Set the size of the input
value string "" Specify the input value
type string "" Specify the input type
placeholder string "" Specify the placeholder text
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the input
helperText string "" Specify the helper text
id string -- Set an id for the input element
name string -- Specify a name attribute for the input
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text
warn boolean false Set to true to indicate an warning state
warnText string "" Specify the warning state text
ref null | HTMLInputElement null Obtain a reference to the input HTML element
required boolean false Set to true to mark the field as required
inline boolean false Set to true to use inline version

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 Description
hideLabel boolean false Set to true to hide the label text

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 Description
light boolean false Set to true to enable the light variant

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 Description
selected string -- Specify the selected tile value
disabled boolean false Set to true to disable the tile group
legend string "" Specify the legend text

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 Description
value string "" Specify the input value
type string "text" Specify the input type
placeholder string "hh=mm" Specify the input placeholder text
pattern string "(1[012] [1-9]):[0-5]0-9?"
maxlength number 5 Specify the maxlength input attribute
light boolean false Set to true to enable the light variant
disabled boolean false Set to true to disable the input
labelText string "" Specify the label text
hideLabel boolean false Set to true to visually hide the label text
invalid boolean false Set to true to indicate an invalid state
invalidText string "" Specify the invalid state text
id string -- Set an id for the input element
name string -- Specify a name attribute for the input
ref null | HTMLInputElement null Obtain a reference to the input HTML element

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 Description
value string "" Specify the select value
disabled boolean false Set to true to disable the select
iconDescription string "Open list of options" Specify the ARIA label for the chevron icon
labelText string "" Specify the label text
hideLabel boolean true
id string -- Set an id for the select element
name string -- Specify a name attribute for the select element
ref null | HTMLSelectElement null Obtain a reference to the select HTML element

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 Description
notificationType "toast" | "inline" "toast" Set the type of notification
kind "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" "error" Specify the kind of notification
lowContrast boolean false Set to true to use the low contrast variant
timeout number 0 Set the timeout duration (ms) to hide the notification after opening it
role string "alert" Set the role attribute
title string "Title" Specify the title text
subtitle string "" Specify the subtitle text
caption string "Caption" Specify the caption text
iconDescription string "Closes notification" Specify the ARIA label for the icon
hideCloseButton boolean false Set to true to hide the close button

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 Description
toggled boolean false Set to true to toggle the checkbox input
disabled boolean false Set to true to disable checkbox input
labelA string "Off" Specify the label for the untoggled state
labelB string "On" Specify the label for the toggled state
labelText string "" Specify the label text
id string -- Set an id for the input element
name string -- Specify a name attribute for the checkbox input

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 Description
labelText string "" Specify the label text
id string -- Set an id for the input element

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 Description
toggled boolean false Set to true to toggle the checkbox input
disabled boolean false Set to true to disable checkbox input
labelA string "Off" Specify the label for the untoggled state
labelB string "On" Specify the label for the toggled state
labelText string "" Specify the label text
id string -- Set an id for the input element
name string -- Specify a name attribute for the checkbox input

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 Description
labelText string "" Specify the label text
id string -- Set an id for the input element

Slots

No slots.

Forwarded events

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

Dispatched events

No dispatched events.

Tooltip

Import path

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

Props

Prop name Type Default value Description
direction "top" | "right" | "bottom" | "left" "bottom" Set the direction of the tooltip relative to the button
open boolean false Set to true to open the tooltip
hideIcon boolean false Set to true to hide the tooltip icon
icon typeof import("carbon-icons-svelte/lib/Add16").default -- Specify the icon from carbon-icons-svelte to render for the tooltip button. Icon size must be 16px (e.g. Add16, Task16)
iconDescription string "" Specify the ARIA label for the tooltip button
iconName string "" Specify the icon name attribute
tabindex string "0" Set the button tabindex
tooltipId string -- Set an id for the tooltip
triggerId string -- Set an id for the tooltip button
triggerText string "" Set the tooltip button text
ref null | HTMLElement null Obtain a reference to the trigger text HTML element
refTooltip null | HTMLElement null Obtain a reference to the tooltip HTML element
refIcon null | HTMLElement null Obtain a reference to the icon HTML element

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 Description
tooltipText string "" Specify the tooltip text
align "start" | "center" | "end" "center" Set the alignment of the tooltip relative to the icon
direction "top" | "bottom" "bottom" Set the direction of the tooltip relative to the icon
id string -- Set an id for the tooltip div element
ref null | HTMLButtonElement null Obtain a reference to the button HTML element

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 Description
tooltipText string "" Specify the tooltip text
align "start" | "center" | "end" "center" Set the alignment of the tooltip relative to the icon
direction "top" | "right" | "bottom" | "left" "bottom" Set the direction of the tooltip relative to the icon
id string -- Set an id for the span element
ref null | HTMLButtonElement null Obtain a reference to the button HTML element

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 Description
nested boolean false Set to true to use the nested variant

Slots

  • <slot>...</slot>

Forwarded events

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

Dispatched events

No dispatched events.