sl-alert

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon-button': SlIconButton }	-	-	-	true
base	{ "text": "HTMLElement" }	-	-	-	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.	open	true	-
closable	{ "text": "boolean" }	false	Enables a close button that allows the user to dismiss the alert.	closable	true	-
variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger'" }	'primary'	The alert's theme variant.	variant	true	-
duration	-	Infinity	The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning the alert will not close on its own.	duration	-	-

Attributes
name	default	description	fieldName	type	resolveInitializer
open	false	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.	open	{ "text": "boolean" }	-
closable	false	Enables a close button that allows the user to dismiss the alert.	closable	{ "text": "boolean" }	-
variant	'primary'	The alert's theme variant.	variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger'" }	-
duration	Infinity	The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning the alert will not close on its own.	duration	-	{ "module": "src/components/alert/alert.component.ts" }

CSS Parts
name	description
base	The component's base wrapper.
icon	The container that wraps the optional icon.
message	The container that wraps the alert's main content.
close-button	The close button, an `<sl-icon-button>`.
close-button__base	The close button's exported `base` part.

Slots
name	description
	The alert's main content.
icon	An icon to show in the alert. Works best with `<sl-icon>`.

Events
name	description	reactName	eventName
sl-show	Emitted when the alert opens.	onSlShow	SlShowEvent
sl-after-show	Emitted after the alert opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent
sl-hide	Emitted when the alert closes.	onSlHide	SlHideEvent
sl-after-hide	Emitted after the alert closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent

Methods
name	description
handleOpenChange	-
handleDurationChange	-
show	Shows the alert.
hide	Hides the alert
toast	Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden.

sl-avatar

Properties
name	type	default	description	attribute	static	reflects
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	-	-	true	-
image	{ "text": "string" }	''	The image source to use for the avatar.	image	-	-
label	{ "text": "string" }	''	A label to use to describe the avatar to assistive devices.	label	-	-
initials	{ "text": "string" }	''	Initials to use as a fallback when no image is available (1-2 characters max recommended).	initials	-	-
loading	{ "text": "'eager' \| 'lazy'" }	'eager'	Indicates how the browser should load the image.	loading	-	-
shape	{ "text": "'circle' \| 'square' \| 'rounded'" }	'circle'	The shape of the avatar.	shape	-	true

Attributes
name	type	default	description	fieldName
image	{ "text": "string" }	''	The image source to use for the avatar.	image
label	{ "text": "string" }	''	A label to use to describe the avatar to assistive devices.	label
initials	{ "text": "string" }	''	Initials to use as a fallback when no image is available (1-2 characters max recommended).	initials
loading	{ "text": "'eager' \| 'lazy'" }	'eager'	Indicates how the browser should load the image.	loading
shape	{ "text": "'circle' \| 'square' \| 'rounded'" }	'circle'	The shape of the avatar.	shape

CSS Properties
name	description
--size	The size of the avatar.

CSS Parts
name	description
base	The component's base wrapper.
icon	The container that wraps the avatar's icon.
initials	The container that wraps the avatar's initials.
image	The avatar image. Only shown when the `image` attribute is set.

Slots
name	description
icon	The default icon to use when no image or initials are present. Works best with `<sl-icon>`.

Methods
name
handleImageChange

Properties
name	type	default	static	description	attribute
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	true	-	-
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-	-
separatorSlot	{ "text": "HTMLSlotElement" }	-	-	-	-
label	{ "text": "string" }	''	-	The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by screen readers and other assistive devices to provide more context for users.	label

Attributes
name	type	default	description	fieldName
label	{ "text": "string" }	''	The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by screen readers and other assistive devices to provide more context for users.	label

CSS Parts
name	description
base	The component's base wrapper.

Slots
name	description
	One or more breadcrumb items to display.
separator	The separator to use between breadcrumb items. Works best with `<sl-icon>`.

Properties
name	type	description	attribute	default
href	{ "text": "string \| undefined" }	Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered internally. When unset, a button will be rendered instead.	href	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top' \| undefined" }	Tells the browser where to open the link. Only used when `href` is set.	target	-
rel	{ "text": "string" }	The `rel` attribute to use on the link. Only used when `href` is set.	rel	'noreferrer noopener'

Attributes
name	type	description	fieldName	default
href	{ "text": "string \| undefined" }	Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered internally. When unset, a button will be rendered instead.	href	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top' \| undefined" }	Tells the browser where to open the link. Only used when `href` is set.	target	-
rel	{ "text": "string" }	The `rel` attribute to use on the link. Only used when `href` is set.	rel	'noreferrer noopener'

CSS Parts
name	description
base	The component's base wrapper.
label	The breadcrumb item's label.
prefix	The container that wraps the prefix.
suffix	The container that wraps the suffix.
separator	The container that wraps the separator.

Slots
name	description
	The breadcrumb item's label.
prefix	An optional prefix, usually an icon or icon button.
suffix	An optional suffix, usually an icon or icon button.
separator	The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.

sl-badge

Properties
name	type	default	description	attribute	reflects
variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger'" }	'primary'	The badge's theme variant.	variant	true
pill	{ "text": "boolean" }	false	Draws a pill-style badge with rounded edges.	pill	true
pulse	{ "text": "boolean" }	false	Makes the badge pulsate to draw attention.	pulse	true

Attributes
name	type	default	description	fieldName
variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger'" }	'primary'	The badge's theme variant.	variant
pill	{ "text": "boolean" }	false	Draws a pill-style badge with rounded edges.	pill
pulse	{ "text": "boolean" }	false	Makes the badge pulsate to draw attention.	pulse

CSS Parts
name	description
base	The component's base wrapper.

Slots
name	description
	The badge's content.

sl-animation

Properties
name	type	description	default	attribute	reflects
defaultSlot	{ "text": "Promise" }	-	-	-	-
name	{ "text": "string" }	The name of the built-in animation to use. For custom animations, use the `keyframes` prop.	'none'	name	-
play	{ "text": "boolean" }	Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets canceled.	false	play	true
delay	{ "text": "number" }	The number of milliseconds to delay the start of the animation.	0	delay	-
direction	{ "text": "PlaybackDirection" }	Determines the direction of playback as well as the behavior when reaching the end of an iteration. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)	'normal'	direction	-
duration	{ "text": "number" }	The number of milliseconds each iteration of the animation takes to complete.	1000	duration	-
easing	{ "text": "string" }	The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.	'linear'	easing	-
endDelay	{ "text": "number" }	The number of milliseconds to delay after the active period of an animation sequence.	0	end-delay	-
fill	{ "text": "FillMode" }	Sets how the animation applies styles to its target before and after its execution.	'auto'	fill	-
iterations	-	The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.	Infinity	iterations	-
iterationStart	{ "text": "number" }	The offset at which to start the animation, usually between 0 (start) and 1 (end).	0	iteration-start	-
keyframes	{ "text": "Keyframe[] \| undefined" }	The keyframes to use for the animation. If this is set, `name` will be ignored.	-	-	-
playbackRate	{ "text": "number" }	Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.	1	playback-rate	-
currentTime	{ "text": "CSSNumberish" }	Gets and sets the current animation time.	-	-	-

Attributes
name	default	description	fieldName	type	resolveInitializer
name	'none'	The name of the built-in animation to use. For custom animations, use the `keyframes` prop.	name	{ "text": "string" }	-
play	false	Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets canceled.	play	{ "text": "boolean" }	-
delay	0	The number of milliseconds to delay the start of the animation.	delay	{ "text": "number" }	-
direction	'normal'	Determines the direction of playback as well as the behavior when reaching the end of an iteration. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)	direction	{ "text": "PlaybackDirection" }	-
duration	1000	The number of milliseconds each iteration of the animation takes to complete.	duration	{ "text": "number" }	-
easing	'linear'	The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.	easing	{ "text": "string" }	-
end-delay	0	The number of milliseconds to delay after the active period of an animation sequence.	endDelay	{ "text": "number" }	-
fill	'auto'	Sets how the animation applies styles to its target before and after its execution.	fill	{ "text": "FillMode" }	-
iterations	Infinity	The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.	iterations	-	{ "module": "src/components/animation/animation.component.ts" }
iteration-start	0	The offset at which to start the animation, usually between 0 (start) and 1 (end).	iterationStart	{ "text": "number" }	-
playback-rate	1	Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.	playbackRate	{ "text": "number" }	-

Slots
name	description
	The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.

Events
name	description	reactName	eventName
sl-cancel	Emitted when the animation is canceled.	onSlCancel	SlCancelEvent
sl-finish	Emitted when the animation finishes.	onSlFinish	SlFinishEvent
sl-start	Emitted when the animation starts or restarts.	onSlStart	SlStartEvent

Methods
name	description
handleAnimationChange	-
handlePlayChange	-
handlePlaybackRateChange	-
cancel	Clears all keyframe effects caused by this animation and aborts its playback.
finish	Sets the playback time to the end of the animation corresponding to the current playback direction.

sl-button

Properties
name	type	description	attribute	default	reflects	readonly	static
dependencies	{ "text": "object" }	-	-	{ 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }	-	-	true
button	{ "text": "HTMLButtonElement \| HTMLLinkElement" }	-	-	-	-	-	-
invalid	{ "text": "boolean" }	-	-	false	-	-	-
title	{ "text": "string" }	-	title	''	-	-	-
variant	{ "text": "'default' \| 'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger' \| 'text'" }	The button's theme variant.	variant	'default'	true	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	The button's size.	size	'medium'	true	-	-
caret	{ "text": "boolean" }	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.	caret	false	true	-	-
disabled	{ "text": "boolean" }	Disables the button.	disabled	false	true	-	-
loading	{ "text": "boolean" }	Draws the button in a loading state.	loading	false	true	-	-
outline	{ "text": "boolean" }	Draws an outlined button.	outline	false	true	-	-
pill	{ "text": "boolean" }	Draws a pill-style button with rounded edges.	pill	false	true	-	-
circle	{ "text": "boolean" }	Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the default slot.	circle	false	true	-	-
type	{ "text": "'button' \| 'submit' \| 'reset'" }	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.	type	'button'	-	-	-
name	{ "text": "string" }	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	name	''	-	-	-
value	{ "text": "string" }	The value of the button, submitted as a pair with the button's name as part of the form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	value	''	-	-	-
href	{ "text": "string" }	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	href	''	-	-	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top'" }	Tells the browser where to open the link. Only used when `href` is present.	target	-	-	-	-
rel	{ "text": "string" }	When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.	rel	'noreferrer noopener'	-	-	-
download	{ "text": "string \| undefined" }	Tells the browser to download the linked file as this filename. Only used when `href` is present.	download	-	-	-	-
form	{ "text": "string" }	The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.	form	-	-	-	-
formAction	{ "text": "string" }	Used to override the form owner's `action` attribute.	formaction	-	-	-	-
formEnctype	{ "text": "'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'" }	Used to override the form owner's `enctype` attribute.	formenctype	-	-	-	-
formMethod	{ "text": "'post' \| 'get'" }	Used to override the form owner's `method` attribute.	formmethod	-	-	-	-
formNoValidate	{ "text": "boolean" }	Used to override the form owner's `novalidate` attribute.	formnovalidate	-	-	-	-
formTarget	{ "text": "'_self' \| '_blank' \| '_parent' \| '_top' \| string" }	Used to override the form owner's `target` attribute.	formtarget	-	-	-	-
validity	-	Gets the validity state object	-	-	-	true	-
validationMessage	-	Gets the validation message	-	-	-	true	-

Attributes
name	type	fieldName	description	default
title	{ "text": "string" }	title	-	''
variant	{ "text": "'default' \| 'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger' \| 'text'" }	variant	The button's theme variant.	'default'
size	{ "text": "'small' \| 'medium' \| 'large'" }	size	The button's size.	'medium'
caret	{ "text": "boolean" }	caret	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.	false
disabled	{ "text": "boolean" }	disabled	Disables the button.	false
loading	{ "text": "boolean" }	loading	Draws the button in a loading state.	false
outline	{ "text": "boolean" }	outline	Draws an outlined button.	false
pill	{ "text": "boolean" }	pill	Draws a pill-style button with rounded edges.	false
circle	{ "text": "boolean" }	circle	Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the default slot.	false
type	{ "text": "'button' \| 'submit' \| 'reset'" }	type	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.	'button'
name	{ "text": "string" }	name	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	''
value	{ "text": "string" }	value	The value of the button, submitted as a pair with the button's name as part of the form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	''
href	{ "text": "string" }	href	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	''
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top'" }	target	Tells the browser where to open the link. Only used when `href` is present.	-
rel	{ "text": "string" }	rel	When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.	'noreferrer noopener'
download	{ "text": "string \| undefined" }	download	Tells the browser to download the linked file as this filename. Only used when `href` is present.	-
form	{ "text": "string" }	form	The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.	-
formaction	{ "text": "string" }	formAction	Used to override the form owner's `action` attribute.	-
formenctype	{ "text": "'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'" }	formEnctype	Used to override the form owner's `enctype` attribute.	-
formmethod	{ "text": "'post' \| 'get'" }	formMethod	Used to override the form owner's `method` attribute.	-
formnovalidate	{ "text": "boolean" }	formNoValidate	Used to override the form owner's `novalidate` attribute.	-
formtarget	{ "text": "'_self' \| '_blank' \| '_parent' \| '_top' \| string" }	formTarget	Used to override the form owner's `target` attribute.	-

CSS Parts
name	description
base	The component's base wrapper.
prefix	The container that wraps the prefix.
label	The button's label.
suffix	The container that wraps the suffix.
caret	The button's caret icon, an `<sl-icon>` element.
spinner	The spinner that shows when the button is in the loading state.

Slots
name	description
	The button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar element.

Events
name	description	reactName	eventName
sl-blur	Emitted when the button loses focus.	onSlBlur	SlBlurEvent
sl-focus	Emitted when the button gains focus.	onSlFocus	SlFocusEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleDisabledChange

click

Simulates a click on the button.

focus

Sets focus on the button.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the button.

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	type
message	{ "text": "string" }

sl-animated-image

Properties
name	type	description	attribute	default	static	reflects
dependencies	{ "text": "object" }	-	-	{ 'sl-icon': SlIcon }	true	-
animatedImage	{ "text": "HTMLImageElement" }	-	-	-	-	-
frozenFrame	{ "text": "string" }	-	-	-	-	-
isLoaded	{ "text": "boolean" }	-	-	false	-	-
src	{ "text": "string" }	The path to the image to load.	src	-	-	-
alt	{ "text": "string" }	A description of the image used by assistive devices.	alt	-	-	-
play	{ "text": "boolean" }	Plays the animation. When this attribute is remove, the animation will pause.	play	-	-	true

Attributes
name	type	description	fieldName
src	{ "text": "string" }	The path to the image to load.	src
alt	{ "text": "string" }	A description of the image used by assistive devices.	alt
play	{ "text": "boolean" }	Plays the animation. When this attribute is remove, the animation will pause.	play

CSS Properties
name	description
--control-box-size	The size of the icon box.
--icon-size	The size of the play/pause icons.

CSS Parts
name	description
control-box	The container that surrounds the pause/play icons and provides their background.

Slots
name	description
play-icon	Optional play icon to use instead of the default. Works best with `<sl-icon>`.
pause-icon	Optional pause icon to use instead of the default. Works best with `<sl-icon>`.

Events
name	description	reactName	eventName
sl-load	Emitted when the image loads successfully.	onSlLoad	SlLoadEvent
sl-error	Emitted when the image fails to load.	onSlError	SlErrorEvent

Methods
name
handlePlayChange
handleSrcChange

sl-button-group

Properties
name	type	default	description	attribute
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-
disableRole	{ "text": "boolean" }	false	-	-
label	{ "text": "string" }	''	A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is strongly recommended.	label

Attributes
name	type	default	description	fieldName
label	{ "text": "string" }	''	A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is strongly recommended.	label

CSS Parts
name	description
base	The component's base wrapper.

Slots
name	description
	One or more `<sl-button>` elements to display in the button group.

sl-card

CSS Properties
name	description
--border-color	The card's border color, including borders that occur inside the card.
--border-radius	The border radius for the card's edges.
--border-width	The width of the card's borders.
--padding	The padding to use for the card's sections.

CSS Parts
name	description
base	The component's base wrapper.
image	The container that wraps the card's image.
header	The container that wraps the card's header.
body	The container that wraps the card's main content.
footer	The container that wraps the card's footer.

Slots
name	description
	The card's main content.
header	An optional header for the card.
footer	An optional footer for the card.
image	An optional image to render at the start of the card.

sl-carousel

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	-	-	-	true
loop	{ "text": "boolean" }	false	When set, allows the user to navigate the carousel in the same direction indefinitely.	loop	true	-
navigation	{ "text": "boolean" }	false	When set, show the carousel's navigation.	navigation	true	-
pagination	{ "text": "boolean" }	false	When set, show the carousel's pagination indicators.	pagination	true	-
autoplay	{ "text": "boolean" }	false	When set, the slides will scroll automatically when the user is not interacting with them.	autoplay	true	-
autoplayInterval	{ "text": "number" }	3000	Specifies the amount of time, in milliseconds, between each automatic scroll.	autoplay-interval	-	-
slidesPerPage	{ "text": "number" }	1	Specifies how many slides should be shown at a given time.	slides-per-page	-	-
slidesPerMove	{ "text": "number" }	1	Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page` greater than one. It can't be higher than `slides-per-page`.	slides-per-move	-	-
orientation	{ "text": "'horizontal' \| 'vertical'" }	'horizontal'	Specifies the orientation in which the carousel will lay out.	orientation	-	-
mouseDragging	{ "text": "boolean" }	false	When set, it is possible to scroll through the slides by dragging them with the mouse.	mouse-dragging	true	-
scrollContainer	{ "text": "HTMLElement" }	-	-	-	-	-
paginationContainer	{ "text": "HTMLElement" }	-	-	-	-	-
activeSlide	{ "text": "number" }	0	-	-	-	-
scrolling	{ "text": "boolean" }	false	-	-	-	-
dragging	{ "text": "boolean" }	false	-	-	-	-

Attributes
name	type	default	description	fieldName
loop	{ "text": "boolean" }	false	When set, allows the user to navigate the carousel in the same direction indefinitely.	loop
navigation	{ "text": "boolean" }	false	When set, show the carousel's navigation.	navigation
pagination	{ "text": "boolean" }	false	When set, show the carousel's pagination indicators.	pagination
autoplay	{ "text": "boolean" }	false	When set, the slides will scroll automatically when the user is not interacting with them.	autoplay
autoplay-interval	{ "text": "number" }	3000	Specifies the amount of time, in milliseconds, between each automatic scroll.	autoplayInterval
slides-per-page	{ "text": "number" }	1	Specifies how many slides should be shown at a given time.	slidesPerPage
slides-per-move	{ "text": "number" }	1	Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page` greater than one. It can't be higher than `slides-per-page`.	slidesPerMove
orientation	{ "text": "'horizontal' \| 'vertical'" }	'horizontal'	Specifies the orientation in which the carousel will lay out.	orientation
mouse-dragging	{ "text": "boolean" }	false	When set, it is possible to scroll through the slides by dragging them with the mouse.	mouseDragging

CSS Properties
name	description	default
--slide-gap	The space between each slide.	-
--aspect-ratio	The aspect ratio of each slide.	16/9
--scroll-hint	The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.	-

CSS Parts
name	description
base	The carousel's internal wrapper.
scroll-container	The scroll container that wraps the slides.
pagination	The pagination indicators wrapper.
pagination-item	The pagination indicator.
pagination-item--active	Applied when the item is active.
navigation	The navigation wrapper.
navigation-button	The navigation button.
navigation-button--previous	Applied to the previous button.
navigation-button--next	Applied to the next button.

Slots
name	description
	The carousel's main content, one or more `<sl-carousel-item>` elements.
next-icon	Optional next icon to use instead of the default. Works best with `<sl-icon>`.
previous-icon	Optional previous icon to use instead of the default. Works best with `<sl-icon>`.

Events
name	type	description	reactName	eventName
sl-slide-change	{ "text": "{ index: number, slide: SlCarouselItem }" }	Emitted when the active slide changes.	onSlSlideChange	SlSlideChangeEvent

Methods

name

parameters

description

initializeSlides

handelSlideChange

updateSlidesSnap

handleAutoplayChange

parameters
name	default	type	description
behavior	'smooth'	{ "text": "ScrollBehavior" }	The behavior used for scrolling.

Move the carousel backward by `slides-per-move` slides.

parameters
name	default	type	description
behavior	'smooth'	{ "text": "ScrollBehavior" }	The behavior used for scrolling.

Move the carousel forward by `slides-per-move` slides.

goToSlide

parameters
name	type	description	default
index	{ "text": "number" }	The slide index.	-
behavior	{ "text": "ScrollBehavior" }	The behavior used for scrolling.	'smooth'

Scrolls the carousel to the slide specified by `index`.

sl-carousel-item

CSS Properties
name	description
--aspect-ratio	The slide's aspect ratio. Inherited from the carousel by default.

Slots
name	description
	The carousel item's content..

sl-checkbox

Properties
name	type	description	default	attribute	reflects	readonly	static
dependencies	{ "text": "object" }	-	{ 'sl-icon': SlIcon }	-	-	-	true
input	{ "text": "HTMLInputElement" }	-	-	-	-	-	-
title	{ "text": "string" }	-	''	title	-	-	-
name	{ "text": "string" }	The name of the checkbox, submitted as a name/value pair with form data.	''	name	-	-	-
value	{ "text": "string" }	The current value of the checkbox, submitted as a name/value pair with form data.	-	value	-	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	The checkbox's size.	'medium'	size	true	-	-
disabled	{ "text": "boolean" }	Disables the checkbox.	false	disabled	true	-	-
checked	{ "text": "boolean" }	Draws the checkbox in a checked state.	false	checked	true	-	-
indeterminate	{ "text": "boolean" }	Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select all/none" behavior when associated checkboxes have a mix of checked and unchecked states.	false	indeterminate	true	-	-
defaultChecked	{ "text": "boolean" }	The default value of the form control. Primarily used for resetting the form control.	false	-	-	-	-
form	{ "text": "string" }	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	''	form	true	-	-
required	{ "text": "boolean" }	Makes the checkbox a required field.	false	required	true	-	-
helpText	{ "text": "string" }	The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.	''	help-text	-	-	-
validity	-	Gets the validity state object	-	-	-	true	-
validationMessage	-	Gets the validation message	-	-	-	true	-

Attributes
name	type	fieldName	default	description
title	{ "text": "string" }	title	''	-
name	{ "text": "string" }	name	''	The name of the checkbox, submitted as a name/value pair with form data.
value	{ "text": "string" }	value	-	The current value of the checkbox, submitted as a name/value pair with form data.
size	{ "text": "'small' \| 'medium' \| 'large'" }	size	'medium'	The checkbox's size.
disabled	{ "text": "boolean" }	disabled	false	Disables the checkbox.
checked	{ "text": "boolean" }	checked	false	Draws the checkbox in a checked state.
indeterminate	{ "text": "boolean" }	indeterminate	false	Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
form	{ "text": "string" }	form	''	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
required	{ "text": "boolean" }	required	false	Makes the checkbox a required field.
help-text	{ "text": "string" }	helpText	''	The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.

CSS Parts
name	description
base	The component's base wrapper.
control	The square container that wraps the checkbox's checked state.
control--checked	Matches the control part when the checkbox is checked.
control--indeterminate	Matches the control part when the checkbox is indeterminate.
checked-icon	The checked icon, an `<sl-icon>` element.
indeterminate-icon	The indeterminate icon, an `<sl-icon>` element.
label	The container that wraps the checkbox's label.
form-control-help-text	The help text's wrapper.

Slots
name	description
	The checkbox's label.
help-text	Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.

Events
name	description	reactName	eventName
sl-blur	Emitted when the checkbox loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when the checked state changes.	onSlChange	SlChangeEvent
sl-focus	Emitted when the checkbox gains focus.	onSlFocus	SlFocusEvent
sl-input	Emitted when the checkbox receives input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleDisabledChange

handleStateChange

click

Simulates a click on the checkbox.

focus

Sets focus on the checkbox.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the checkbox.

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear the custom validation message, call this method with an empty string.

parameters
name	type
message	{ "text": "string" }

sl-color-picker

Properties
name	type	description	default	attribute	reflects	readonly	static
dependencies	{ "text": "object" }	-	{ 'sl-button-group': SlButtonGroup, 'sl-button': SlButton, 'sl-dropdown': SlDropdown, 'sl-icon': SlIcon, 'sl-input': SlInput, 'sl-visually-hidden': SlVisuallyHidden }	-	-	-	true
base	{ "text": "HTMLElement" }	-	-	-	-	-	-
input	{ "text": "SlInput" }	-	-	-	-	-	-
dropdown	{ "text": "SlDropdown" }	-	-	-	-	-	-
previewButton	{ "text": "HTMLButtonElement" }	-	-	-	-	-	-
trigger	{ "text": "HTMLButtonElement" }	-	-	-	-	-	-
value	{ "text": "string" }	The current value of the color picker. The value's format will vary based the `format` attribute. To get the value in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form data.	''	value	-	-	-
defaultValue	{ "text": "string" }	The default value of the form control. Primarily used for resetting the form control.	''	-	-	-	-
label	{ "text": "string" }	The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to display HTML, you can use the `label` slot` instead.	''	label	-	-	-
format	{ "text": "'hex' \| 'rgb' \| 'hsl' \| 'hsv'" }	The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color picker will accept user input in any format (including CSS color names) and convert it to the desired format.	'hex'	format	-	-	-
inline	{ "text": "boolean" }	Renders the color picker inline rather than in a dropdown.	false	inline	true	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	Determines the size of the color picker's trigger. This has no effect on inline color pickers.	'medium'	size	true	-	-
noFormatToggle	{ "text": "boolean" }	Removes the button that lets users toggle between format.	false	no-format-toggle	-	-	-
name	{ "text": "string" }	The name of the form control, submitted as a name/value pair with form data.	''	name	-	-	-
disabled	{ "text": "boolean" }	Disables the color picker.	false	disabled	true	-	-
hoist	{ "text": "boolean" }	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	false	hoist	-	-	-
opacity	{ "text": "boolean" }	Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.	false	opacity	-	-	-
uppercase	{ "text": "boolean" }	By default, values are lowercase. With this attribute, values will be uppercase instead.	false	uppercase	-	-	-
swatches	{ "text": "string \| string[]" }	One or more predefined color swatches to display as presets in the color picker. Can include any format the color picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.	''	swatches	-	-	-
form	{ "text": "string" }	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	''	form	true	-	-
required	{ "text": "boolean" }	Makes the color picker a required field.	false	required	true	-	-
validity	-	Gets the validity state object	-	-	-	true	-
validationMessage	-	Gets the validation message	-	-	-	true	-

Attributes
name	type	default	description	fieldName
value	{ "text": "string" }	''	The current value of the color picker. The value's format will vary based the `format` attribute. To get the value in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form data.	value
label	{ "text": "string" }	''	The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to display HTML, you can use the `label` slot` instead.	label
format	{ "text": "'hex' \| 'rgb' \| 'hsl' \| 'hsv'" }	'hex'	The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color picker will accept user input in any format (including CSS color names) and convert it to the desired format.	format
inline	{ "text": "boolean" }	false	Renders the color picker inline rather than in a dropdown.	inline
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	Determines the size of the color picker's trigger. This has no effect on inline color pickers.	size
no-format-toggle	{ "text": "boolean" }	false	Removes the button that lets users toggle between format.	noFormatToggle
name	{ "text": "string" }	''	The name of the form control, submitted as a name/value pair with form data.	name
disabled	{ "text": "boolean" }	false	Disables the color picker.	disabled
hoist	{ "text": "boolean" }	false	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist
opacity	{ "text": "boolean" }	false	Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.	opacity
uppercase	{ "text": "boolean" }	false	By default, values are lowercase. With this attribute, values will be uppercase instead.	uppercase
swatches	{ "text": "string \| string[]" }	''	One or more predefined color swatches to display as presets in the color picker. Can include any format the color picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.	swatches
form	{ "text": "string" }	''	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	form
required	{ "text": "boolean" }	false	Makes the color picker a required field.	required

CSS Properties
name	description
--grid-width	The width of the color grid.
--grid-height	The height of the color grid.
--grid-handle-size	The size of the color grid's handle.
--slider-height	The height of the hue and alpha sliders.
--slider-handle-size	The diameter of the slider's handle.
--swatch-size	The size of each predefined color swatch.

CSS Parts
name	description
base	The component's base wrapper.
trigger	The color picker's dropdown trigger.
swatches	The container that holds the swatches.
swatch	Each individual swatch.
grid	The color grid.
grid-handle	The color grid's handle.
slider	Hue and opacity sliders.
slider-handle	Hue and opacity slider handles.
hue-slider	The hue slider.
hue-slider-handle	The hue slider's handle.
opacity-slider	The opacity slider.
opacity-slider-handle	The opacity slider's handle.
preview	The preview color.
input	The text input.
eye-dropper-button	The eye dropper button.
eye-dropper-button__base	The eye dropper button's exported `button` part.
eye-dropper-button__prefix	The eye dropper button's exported `prefix` part.
eye-dropper-button__label	The eye dropper button's exported `label` part.
eye-dropper-button__suffix	The eye dropper button's exported `suffix` part.
eye-dropper-button__caret	The eye dropper button's exported `caret` part.
format-button	The format button.
format-button__base	The format button's exported `button` part.
format-button__prefix	The format button's exported `prefix` part.
format-button__label	The format button's exported `label` part.
format-button__suffix	The format button's exported `suffix` part.
format-button__caret	The format button's exported `caret` part.

Slots
name	description
label	The color picker's form label. Alternatively, you can use the `label` attribute.

Events
name	description	reactName	eventName
sl-blur	Emitted when the color picker loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when the color picker's value changes.	onSlChange	SlChangeEvent
sl-focus	Emitted when the color picker receives focus.	onSlFocus	SlFocusEvent
sl-input	Emitted when the color picker receives input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleFormatChange

handleOpacityChange

handleValueChange

parameters
name	type
oldValue	{ "text": "string \| undefined" }
newValue	{ "text": "string" }

focus

Sets focus on the color picker.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the color picker.

getFormattedValue

Returns the current value as a string in the specified format.

parameters
name	default	type
format	'hex'	{ "text": "'hex' \| 'hexa' \| 'rgb' \| 'rgba' \| 'hsl' \| 'hsla' \| 'hsv' \| 'hsva'" }

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	type
message	{ "text": "string" }

sl-copy-button

Properties
name	type	default	description	attribute	static	reflects
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon, 'sl-tooltip': SlTooltip }	-	-	true	-
copyIcon	{ "text": "HTMLSlotElement" }	-	-	-	-	-
successIcon	{ "text": "HTMLSlotElement" }	-	-	-	-	-
errorIcon	{ "text": "HTMLSlotElement" }	-	-	-	-	-
tooltip	{ "text": "SlTooltip" }	-	-	-	-	-
isCopying	{ "text": "boolean" }	false	-	-	-	-
status	{ "text": "'rest' \| 'success' \| 'error'" }	'rest'	-	-	-	-
value	{ "text": "string" }	''	The text value to copy.	value	-	-
from	{ "text": "string" }	''	An id that references an element in the same document from which data will be copied. If both this and `value` are present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property, append a dot and the property name, e.g. `from="el.value"`.	from	-	-
disabled	{ "text": "boolean" }	false	Disables the copy button.	disabled	-	true
copyLabel	{ "text": "string" }	''	A custom label to show in the tooltip.	copy-label	-	-
successLabel	{ "text": "string" }	''	A custom label to show in the tooltip after copying.	success-label	-	-
errorLabel	{ "text": "string" }	''	A custom label to show in the tooltip when a copy error occurs.	error-label	-	-
feedbackDuration	{ "text": "number" }	1000	The length of time to show feedback before restoring the default trigger.	feedback-duration	-	-
tooltipPlacement	{ "text": "'top' \| 'right' \| 'bottom' \| 'left'" }	'top'	The preferred placement of the tooltip.	tooltip-placement	-	-
hoist	{ "text": "boolean" }	false	Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto\|hidden\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist	-	-

Attributes
name	type	default	description	fieldName
value	{ "text": "string" }	''	The text value to copy.	value
from	{ "text": "string" }	''	An id that references an element in the same document from which data will be copied. If both this and `value` are present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property, append a dot and the property name, e.g. `from="el.value"`.	from
disabled	{ "text": "boolean" }	false	Disables the copy button.	disabled
copy-label	{ "text": "string" }	''	A custom label to show in the tooltip.	copyLabel
success-label	{ "text": "string" }	''	A custom label to show in the tooltip after copying.	successLabel
error-label	{ "text": "string" }	''	A custom label to show in the tooltip when a copy error occurs.	errorLabel
feedback-duration	{ "text": "number" }	1000	The length of time to show feedback before restoring the default trigger.	feedbackDuration
tooltip-placement	{ "text": "'top' \| 'right' \| 'bottom' \| 'left'" }	'top'	The preferred placement of the tooltip.	tooltipPlacement
hoist	{ "text": "boolean" }	false	Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto\|hidden\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist

CSS Properties
name	description
--success-color	The color to use for success feedback.
--error-color	The color to use for error feedback.

CSS Parts
name	description
button	The internal `<button>` element.
copy-icon	The container that holds the copy icon.
success-icon	The container that holds the success icon.
error-icon	The container that holds the error icon.
tooltip__base	The tooltip's exported `base` part.
tooltip__base__popup	The tooltip's exported `popup` part.
tooltip__base__arrow	The tooltip's exported `arrow` part.
tooltip__body	The tooltip's exported `body` part.

Slots
name	description
copy-icon	The icon to show in the default copy state. Works best with `<sl-icon>`.
success-icon	The icon to show when the content is copied. Works best with `<sl-icon>`.
error-icon	The icon to show when a copy error occurs. Works best with `<sl-icon>`.

Events
name	description	reactName	eventName
sl-copy	Emitted when the data has been copied.	onSlCopy	SlCopyEvent
sl-error	Emitted when the data could not be copied.	onSlError	SlErrorEvent

sl-details

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	-	-	-	true
details	{ "text": "HTMLDetailsElement" }	-	-	-	-	-
header	{ "text": "HTMLElement" }	-	-	-	-	-
body	{ "text": "HTMLElement" }	-	-	-	-	-
expandIconSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-
detailsObserver	{ "text": "MutationObserver" }	-	-	-	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.	open	true	-
summary	{ "text": "string" }	-	The summary to show in the header. If you need to display HTML, use the `summary` slot instead.	summary	-	-
disabled	{ "text": "boolean" }	false	Disables the details so it can't be toggled.	disabled	true	-

Attributes
name	type	description	fieldName	default
open	{ "text": "boolean" }	Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.	open	false
summary	{ "text": "string" }	The summary to show in the header. If you need to display HTML, use the `summary` slot instead.	summary	-
disabled	{ "text": "boolean" }	Disables the details so it can't be toggled.	disabled	false

CSS Parts
name	description
base	The component's base wrapper.
header	The header that wraps both the summary and the expand/collapse icon.
summary	The container that wraps the summary.
summary-icon	The container that wraps the expand/collapse icons.
content	The details content.

Slots
name	description
	The details' main content.
summary	The details' summary. Alternatively, you can use the `summary` attribute.
expand-icon	Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
collapse-icon	Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.

Events
name	description	reactName	eventName
sl-show	Emitted when the details opens.	onSlShow	SlShowEvent
sl-after-show	Emitted after the details opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent
sl-hide	Emitted when the details closes.	onSlHide	SlHideEvent
sl-after-hide	Emitted after the details closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent

Methods
name	description
handleOpenChange	-
show	Shows the details.
hide	Hides the details

sl-dialog

Properties
name	type	default	description	attribute	reflects	static	privacy
dependencies	{ "text": "object" }	{ 'sl-icon-button': SlIconButton }	-	-	-	true	-
modal	-	new Modal(this)	Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.	-	-	-	public
dialog	{ "text": "HTMLElement" }	-	-	-	-	-	-
panel	{ "text": "HTMLElement" }	-	-	-	-	-	-
overlay	{ "text": "HTMLElement" }	-	-	-	-	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.	open	true	-	-
label	{ "text": "string" }	''	The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.	label	true	-	-
noHeader	{ "text": "boolean" }	false	Disables the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.	no-header	true	-	-

Attributes
name	type	default	description	fieldName
open	{ "text": "boolean" }	false	Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.	open
label	{ "text": "string" }	''	The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.	label
no-header	{ "text": "boolean" }	false	Disables the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.	noHeader

CSS Properties
name	description
--width	The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
--header-spacing	The amount of padding to use for the header.
--body-spacing	The amount of padding to use for the body.
--footer-spacing	The amount of padding to use for the footer.

CSS Parts
name	description
base	The component's base wrapper.
overlay	The overlay that covers the screen behind the dialog.
panel	The dialog's panel (where the dialog and its content are rendered).
header	The dialog's header. This element wraps the title and header actions.
header-actions	Optional actions to add to the header. Works best with `<sl-icon-button>`.
title	The dialog's title.
close-button	The close button, an `<sl-icon-button>`.
close-button__base	The close button's exported `base` part.
body	The dialog's body.
footer	The dialog's footer.

Slots
name	description
	The dialog's main content.
label	The dialog's label. Alternatively, you can use the `label` attribute.
header-actions	Optional actions to add to the header. Works best with `<sl-icon-button>`.
footer	The dialog's footer, usually one or more buttons representing various options.

Events
name	description	reactName	eventName	type
sl-show	Emitted when the dialog opens.	onSlShow	SlShowEvent	-
sl-after-show	Emitted after the dialog opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent	-
sl-hide	Emitted when the dialog closes.	onSlHide	SlHideEvent	-
sl-after-hide	Emitted after the dialog closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent	-
sl-initial-focus	Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.	onSlInitialFocus	SlInitialFocusEvent	-
sl-request-close	Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.	onSlRequestClose	SlRequestCloseEvent	{ "text": "{ source: 'close-button' \| 'keyboard' \| 'overlay' }" }

Methods
name	description
handleOpenChange	-
show	Shows the dialog.
hide	Hides the dialog

sl-divider

Properties
name	type	default	description	attribute	reflects
vertical	{ "text": "boolean" }	false	Draws the divider in a vertical orientation.	vertical	true

Attributes
name	type	default	description	fieldName
vertical	{ "text": "boolean" }	false	Draws the divider in a vertical orientation.	vertical

CSS Properties
name	description
--color	The color of the divider.
--width	The width of the divider.
--spacing	The spacing of the divider.

Methods
name
handleVerticalChange

sl-drawer

Properties
name	type	default	description	attribute	reflects	static	privacy
dependencies	{ "text": "object" }	{ 'sl-icon-button': SlIconButton }	-	-	-	true	-
modal	-	new Modal(this)	Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.	-	-	-	public
drawer	{ "text": "HTMLElement" }	-	-	-	-	-	-
panel	{ "text": "HTMLElement" }	-	-	-	-	-	-
overlay	{ "text": "HTMLElement" }	-	-	-	-	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.	open	true	-	-
label	{ "text": "string" }	''	The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.	label	true	-	-
placement	{ "text": "'top' \| 'end' \| 'bottom' \| 'start'" }	'end'	The direction from which the drawer will open.	placement	true	-	-
contained	{ "text": "boolean" }	false	By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this attribute and add `position: relative` to the parent.	contained	true	-	-
noHeader	{ "text": "boolean" }	false	Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.	no-header	true	-	-

Attributes
name	type	default	description	fieldName
open	{ "text": "boolean" }	false	Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.	open
label	{ "text": "string" }	''	The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.	label
placement	{ "text": "'top' \| 'end' \| 'bottom' \| 'start'" }	'end'	The direction from which the drawer will open.	placement
contained	{ "text": "boolean" }	false	By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this attribute and add `position: relative` to the parent.	contained
no-header	{ "text": "boolean" }	false	Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.	noHeader

CSS Properties
name	description
--size	The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
--header-spacing	The amount of padding to use for the header.
--body-spacing	The amount of padding to use for the body.
--footer-spacing	The amount of padding to use for the footer.

CSS Parts
name	description
base	The component's base wrapper.
overlay	The overlay that covers the screen behind the drawer.
panel	The drawer's panel (where the drawer and its content are rendered).
header	The drawer's header. This element wraps the title and header actions.
header-actions	Optional actions to add to the header. Works best with `<sl-icon-button>`.
title	The drawer's title.
close-button	The close button, an `<sl-icon-button>`.
close-button__base	The close button's exported `base` part.
body	The drawer's body.
footer	The drawer's footer.

Slots
name	description
	The drawer's main content.
label	The drawer's label. Alternatively, you can use the `label` attribute.
header-actions	Optional actions to add to the header. Works best with `<sl-icon-button>`.
footer	The drawer's footer, usually one or more buttons representing various options.

Events
name	description	reactName	eventName	type
sl-show	Emitted when the drawer opens.	onSlShow	SlShowEvent	-
sl-after-show	Emitted after the drawer opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent	-
sl-hide	Emitted when the drawer closes.	onSlHide	SlHideEvent	-
sl-after-hide	Emitted after the drawer closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent	-
sl-initial-focus	Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.	onSlInitialFocus	SlInitialFocusEvent	-
sl-request-close	Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.	onSlRequestClose	SlRequestCloseEvent	{ "text": "{ source: 'close-button' \| 'keyboard' \| 'overlay' }" }

Methods
name	description
handleOpenChange	-
handleNoModalChange	-
show	Shows the drawer.
hide	Hides the drawer

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-popup': SlPopup }	-	-	-	true
popup	{ "text": "SlPopup" }	-	-	-	-	-
trigger	{ "text": "HTMLSlotElement" }	-	-	-	-	-
panel	{ "text": "HTMLSlotElement" }	-	-	-	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.	open	true	-
placement	{ "text": "\| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'" }	'bottom-start'	The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.	placement	true	-
disabled	{ "text": "boolean" }	false	Disables the dropdown so the panel will not open.	disabled	true	-
stayOpenOnSelect	{ "text": "boolean" }	false	By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for dropdowns that allow for multiple interactions.	stay-open-on-select	true	-
containingElement	{ "text": "HTMLElement \| undefined" }	-	The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other components that use a dropdown internally.	-	-	-
distance	{ "text": "number" }	0	The distance in pixels from which to offset the panel away from its trigger.	distance	-	-
skidding	{ "text": "number" }	0	The distance in pixels from which to offset the panel along its trigger.	skidding	-	-
hoist	{ "text": "boolean" }	false	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist	-	-
sync	{ "text": "'width' \| 'height' \| 'both' \| undefined" }	undefined	Syncs the popup width or height to that of the trigger element.	sync	true	-

Attributes
name	type	default	description	fieldName	resolveInitializer
open	{ "text": "boolean" }	false	Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.	open	-
placement	{ "text": "\| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'" }	'bottom-start'	The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.	placement	-
disabled	{ "text": "boolean" }	false	Disables the dropdown so the panel will not open.	disabled	-
stay-open-on-select	{ "text": "boolean" }	false	By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for dropdowns that allow for multiple interactions.	stayOpenOnSelect	-
distance	{ "text": "number" }	0	The distance in pixels from which to offset the panel away from its trigger.	distance	-
skidding	{ "text": "number" }	0	The distance in pixels from which to offset the panel along its trigger.	skidding	-
hoist	{ "text": "boolean" }	false	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist	-
sync	{ "text": "'width' \| 'height' \| 'both' \| undefined" }	undefined	Syncs the popup width or height to that of the trigger element.	sync	{ "module": "src/components/dropdown/dropdown.component.ts" }

CSS Parts
name	description
base	The component's base wrapper.
trigger	The container that wraps the trigger.
panel	The panel that gets shown when the dropdown is open.

Slots
name	description
	The dropdown's main content.
trigger	The dropdown's trigger, usually a `<sl-button>` element.

Events
name	description	reactName	eventName
sl-show	Emitted when the dropdown opens.	onSlShow	SlShowEvent
sl-after-show	Emitted after the dropdown opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent
sl-hide	Emitted when the dropdown closes.	onSlHide	SlHideEvent
sl-after-hide	Emitted after the dropdown closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent

Methods

name

description

parameters

focusOnTrigger

getMenu

handleTriggerClick

handleTriggerKeyDown

parameters
name	type
event	{ "text": "KeyboardEvent" }

handleTriggerKeyUp

parameters
name	type
event	{ "text": "KeyboardEvent" }

handleTriggerSlotChange

updateAccessibleTrigger

show

Shows the dropdown panel.

hide

Hides the dropdown panel

reposition

Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu is activated.

addOpenListeners

removeOpenListeners

handleOpenChange

sl-format-bytes

Properties
name	type	default	description	attribute
value	{ "text": "number" }	0	The number to format in bytes.	value
unit	{ "text": "'byte' \| 'bit'" }	'byte'	The type of unit to display.	unit
display	{ "text": "'long' \| 'short' \| 'narrow'" }	'short'	Determines how to display the result, e.g. "100 bytes", "100 b", or "100b".	display

Attributes
name	type	default	description	fieldName
value	{ "text": "number" }	0	The number to format in bytes.	value
unit	{ "text": "'byte' \| 'bit'" }	'byte'	The type of unit to display.	unit
display	{ "text": "'long' \| 'short' \| 'narrow'" }	'short'	Determines how to display the result, e.g. "100 bytes", "100 b", or "100b".	display

sl-format-date

Properties
name	type	description	attribute	default
date	{ "text": "Date \| string" }	The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).	date	new Date()
weekday	{ "text": "'narrow' \| 'short' \| 'long'" }	The format for displaying the weekday.	weekday	-
era	{ "text": "'narrow' \| 'short' \| 'long'" }	The format for displaying the era.	era	-
year	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the year.	year	-
month	{ "text": "'numeric' \| '2-digit' \| 'narrow' \| 'short' \| 'long'" }	The format for displaying the month.	month	-
day	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the day.	day	-
hour	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the hour.	hour	-
minute	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the minute.	minute	-
second	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the second.	second	-
timeZoneName	{ "text": "'short' \| 'long'" }	The format for displaying the time.	time-zone-name	-
timeZone	{ "text": "string" }	The time zone to express the time in.	time-zone	-
hourFormat	{ "text": "'auto' \| '12' \| '24'" }	The format for displaying the hour.	hour-format	'auto'

Attributes
name	type	description	fieldName	default
date	{ "text": "Date \| string" }	The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).	date	new Date()
weekday	{ "text": "'narrow' \| 'short' \| 'long'" }	The format for displaying the weekday.	weekday	-
era	{ "text": "'narrow' \| 'short' \| 'long'" }	The format for displaying the era.	era	-
year	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the year.	year	-
month	{ "text": "'numeric' \| '2-digit' \| 'narrow' \| 'short' \| 'long'" }	The format for displaying the month.	month	-
day	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the day.	day	-
hour	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the hour.	hour	-
minute	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the minute.	minute	-
second	{ "text": "'numeric' \| '2-digit'" }	The format for displaying the second.	second	-
time-zone-name	{ "text": "'short' \| 'long'" }	The format for displaying the time.	timeZoneName	-
time-zone	{ "text": "string" }	The time zone to express the time in.	timeZone	-
hour-format	{ "text": "'auto' \| '12' \| '24'" }	The format for displaying the hour.	hourFormat	'auto'

sl-format-number

Properties
name	type	description	attribute	default
value	{ "text": "number" }	The number to format.	value	0
type	{ "text": "'currency' \| 'decimal' \| 'percent'" }	The formatting style to use.	type	'decimal'
noGrouping	{ "text": "boolean" }	Turns off grouping separators.	no-grouping	false
currency	{ "text": "string" }	The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.	currency	'USD'
currencyDisplay	{ "text": "'symbol' \| 'narrowSymbol' \| 'code' \| 'name'" }	How to display the currency.	currency-display	'symbol'
minimumIntegerDigits	{ "text": "number" }	The minimum number of integer digits to use. Possible values are 1-21.	minimum-integer-digits	-
minimumFractionDigits	{ "text": "number" }	The minimum number of fraction digits to use. Possible values are 0-20.	minimum-fraction-digits	-
maximumFractionDigits	{ "text": "number" }	The maximum number of fraction digits to use. Possible values are 0-0.	maximum-fraction-digits	-
minimumSignificantDigits	{ "text": "number" }	The minimum number of significant digits to use. Possible values are 1-21.	minimum-significant-digits	-
maximumSignificantDigits	{ "text": "number" }	The maximum number of significant digits to use,. Possible values are 1-21.	maximum-significant-digits	-

Attributes
name	type	description	fieldName	default
value	{ "text": "number" }	The number to format.	value	0
type	{ "text": "'currency' \| 'decimal' \| 'percent'" }	The formatting style to use.	type	'decimal'
no-grouping	{ "text": "boolean" }	Turns off grouping separators.	noGrouping	false
currency	{ "text": "string" }	The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.	currency	'USD'
currency-display	{ "text": "'symbol' \| 'narrowSymbol' \| 'code' \| 'name'" }	How to display the currency.	currencyDisplay	'symbol'
minimum-integer-digits	{ "text": "number" }	The minimum number of integer digits to use. Possible values are 1-21.	minimumIntegerDigits	-
minimum-fraction-digits	{ "text": "number" }	The minimum number of fraction digits to use. Possible values are 0-20.	minimumFractionDigits	-
maximum-fraction-digits	{ "text": "number" }	The maximum number of fraction digits to use. Possible values are 0-0.	maximumFractionDigits	-
minimum-significant-digits	{ "text": "number" }	The minimum number of significant digits to use. Possible values are 1-21.	minimumSignificantDigits	-
maximum-significant-digits	{ "text": "number" }	The maximum number of significant digits to use,. Possible values are 1-21.	maximumSignificantDigits	-

sl-icon

Properties
name	type	description	attribute	reflects	default
name	{ "text": "string \| undefined" }	The name of the icon to draw. Available names depend on the icon library being used.	name	true	-
src	{ "text": "string \| undefined" }	An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks.	src	-	-
label	{ "text": "string" }	An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices.	label	-	''
library	{ "text": "string" }	The name of a registered custom icon library.	library	true	'default'

Attributes
name	type	description	fieldName	default
name	{ "text": "string \| undefined" }	The name of the icon to draw. Available names depend on the icon library being used.	name	-
src	{ "text": "string \| undefined" }	An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks.	src	-
label	{ "text": "string" }	An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices.	label	''
library	{ "text": "string" }	The name of a registered custom icon library.	library	'default'

CSS Parts
name	description
svg	The internal SVG element.
use	The <use> element generated when using `spriteSheet: true`

Events
name	description	reactName	eventName
sl-load	Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.	onSlLoad	SlLoadEvent
sl-error	Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.	onSlError	SlErrorEvent

Methods
name
handleLabelChange
setIcon

sl-icon-button

Properties
name	type	description	attribute	default	static	reflects
dependencies	{ "text": "object" }	-	-	{ 'sl-icon': SlIcon }	true	-
button	{ "text": "HTMLButtonElement \| HTMLLinkElement" }	-	-	-	-	-
name	{ "text": "string \| undefined" }	The name of the icon to draw. Available names depend on the icon library being used.	name	-	-	-
library	{ "text": "string \| undefined" }	The name of a registered custom icon library.	library	-	-	-
src	{ "text": "string \| undefined" }	An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks.	src	-	-	-
href	{ "text": "string \| undefined" }	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	href	-	-	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top' \| undefined" }	Tells the browser where to open the link. Only used when `href` is set.	target	-	-	-
download	{ "text": "string \| undefined" }	Tells the browser to download the linked file as this filename. Only used when `href` is set.	download	-	-	-
label	{ "text": "string" }	A description that gets read by assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does.	label	''	-	-
disabled	{ "text": "boolean" }	Disables the button.	disabled	false	-	true

Attributes
name	type	description	fieldName	default
name	{ "text": "string \| undefined" }	The name of the icon to draw. Available names depend on the icon library being used.	name	-
library	{ "text": "string \| undefined" }	The name of a registered custom icon library.	library	-
src	{ "text": "string \| undefined" }	An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks.	src	-
href	{ "text": "string \| undefined" }	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	href	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top' \| undefined" }	Tells the browser where to open the link. Only used when `href` is set.	target	-
download	{ "text": "string \| undefined" }	Tells the browser to download the linked file as this filename. Only used when `href` is set.	download	-
label	{ "text": "string" }	A description that gets read by assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does.	label	''
disabled	{ "text": "boolean" }	Disables the button.	disabled	false

CSS Parts
name	description
base	The component's base wrapper.

Events
name	description	reactName	eventName
sl-blur	Emitted when the icon button loses focus.	onSlBlur	SlBlurEvent
sl-focus	Emitted when the icon button gains focus.	onSlFocus	SlFocusEvent

Methods

name

description

parameters

click

Simulates a click on the icon button.

focus

Sets focus on the icon button.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the icon button.

sl-image-comparer

Properties
name	type	default	static	description	attribute	reflects
scopedElement	{ "text": "object" }	{ 'sl-icon': SlIcon }	true	-	-	-
base	{ "text": "HTMLElement" }	-	-	-	-	-
handle	{ "text": "HTMLElement" }	-	-	-	-	-
position	{ "text": "number" }	50	-	The position of the divider as a percentage.	position	true

Attributes
name	type	default	description	fieldName
position	{ "text": "number" }	50	The position of the divider as a percentage.	position

CSS Properties
name	description
--divider-width	The width of the dividing line.
--handle-size	The size of the compare handle.

CSS Parts
name	description
base	The component's base wrapper.
before	The container that wraps the before image.
after	The container that wraps the after image.
divider	The divider that separates the images.
handle	The handle that the user drags to expose the after image.

Slots
name	description
before	The before image, an `<img>` or `<svg>` element.
after	The after image, an `<img>` or `<svg>` element.
handle	The icon used inside the handle.

Events
name	description	reactName	eventName
sl-change	Emitted when the position changes.	onSlChange	SlChangeEvent

Methods
name
handlePositionChange

sl-include

Properties
name	type	description	attribute	default
src	{ "text": "string" }	The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.	src	-
mode	{ "text": "'cors' \| 'no-cors' \| 'same-origin'" }	The fetch mode to use.	mode	'cors'
allowScripts	{ "text": "boolean" }	Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.	allow-scripts	false

Attributes
name	type	description	fieldName	default
src	{ "text": "string" }	The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.	src	-
mode	{ "text": "'cors' \| 'no-cors' \| 'same-origin'" }	The fetch mode to use.	mode	'cors'
allow-scripts	{ "text": "boolean" }	Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks.	allowScripts	false

Events
name	description	reactName	eventName	type
sl-load	Emitted when the included file is loaded.	onSlLoad	SlLoadEvent	-
sl-error	Emitted when the included file fails to load due to an error.	onSlError	SlErrorEvent	{ "text": "{ status: number }" }

Methods
name
handleSrcChange

sl-input

Properties
name	description	type	attribute	default	reflects	readonly	static
dependencies	-	{ "text": "object" }	-	{ 'sl-icon': SlIcon }	-	-	true
input	-	{ "text": "HTMLInputElement" }	-	-	-	-	-
title	-	{ "text": "string" }	title	''	-	-	-
type	The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`.	{ "text": "\| 'date'\n \| 'datetime-local'\n \| 'email'\n \| 'number'\n \| 'password'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'time'\n \| 'url'" }	type	'text'	true	-	-
name	The name of the input, submitted as a name/value pair with form data.	{ "text": "string" }	name	''	-	-	-
value	The current value of the input, submitted as a name/value pair with form data.	{ "text": "string" }	value	''	-	-	-
defaultValue	The default value of the form control. Primarily used for resetting the form control.	{ "text": "string" }	-	''	-	-	-
size	The input's size.	{ "text": "'small' \| 'medium' \| 'large'" }	size	'medium'	true	-	-
filled	Draws a filled input.	{ "text": "boolean" }	filled	false	true	-	-
pill	Draws a pill-style input with rounded edges.	{ "text": "boolean" }	pill	false	true	-	-
label	The input's label. If you need to display HTML, use the `label` slot instead.	{ "text": "string" }	label	''	-	-	-
helpText	The input's help text. If you need to display HTML, use the `help-text` slot instead.	{ "text": "string" }	help-text	''	-	-	-
clearable	Adds a clear button when the input is not empty.	{ "text": "boolean" }	clearable	false	-	-	-
disabled	Disables the input.	{ "text": "boolean" }	disabled	false	true	-	-
placeholder	Placeholder text to show as a hint when the input is empty.	{ "text": "string" }	placeholder	''	-	-	-
readonly	Makes the input readonly.	{ "text": "boolean" }	readonly	false	true	-	-
passwordToggle	Adds a button to toggle the password's visibility. Only applies to password types.	{ "text": "boolean" }	password-toggle	false	-	-	-
passwordVisible	Determines whether or not the password is currently visible. Only applies to password input types.	{ "text": "boolean" }	password-visible	false	-	-	-
noSpinButtons	Hides the browser's built-in increment/decrement spin buttons for number inputs.	{ "text": "boolean" }	no-spin-buttons	false	-	-	-
form	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	{ "text": "string" }	form	''	true	-	-
required	Makes the input a required field.	{ "text": "boolean" }	required	false	true	-	-
pattern	A regular expression pattern to validate input against.	{ "text": "string" }	pattern	-	-	-	-
minlength	The minimum length of input that will be considered valid.	{ "text": "number" }	minlength	-	-	-	-
maxlength	The maximum length of input that will be considered valid.	{ "text": "number" }	maxlength	-	-	-	-
min	The input's minimum value. Only applies to date and number input types.	{ "text": "number \| string" }	min	-	-	-	-
max	The input's maximum value. Only applies to date and number input types.	{ "text": "number \| string" }	max	-	-	-	-
step	Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. Only applies to date and number input types.	{ "text": "number \| 'any'" }	step	-	-	-	-
autocapitalize	Controls whether and how text input is automatically capitalized as it is entered by the user.	{ "text": "'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'" }	autocapitalize	-	-	-	-
autocorrect	Indicates whether the browser's autocorrect feature is on or off.	{ "text": "'off' \| 'on'" }	autocorrect	-	-	-	-
autocomplete	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.	{ "text": "string" }	autocomplete	-	-	-	-
autofocus	Indicates that the input should receive focus on page load.	{ "text": "boolean" }	autofocus	-	-	-	-
enterkeyhint	Used to customize the label or icon of the Enter key on virtual keyboards.	{ "text": "'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'" }	enterkeyhint	-	-	-	-
spellcheck	Enables spell checking on the input.	{ "text": "boolean" }	spellcheck	true	-	-	-
inputmode	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.	{ "text": "'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'" }	inputmode	-	-	-	-
valueAsDate	Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error.	-	-	-	-	-	-
valueAsNumber	Gets or sets the current value as a number. Returns `NaN` if the value can't be converted.	-	-	-	-	-	-
validity	Gets the validity state object	-	-	-	-	true	-
validationMessage	Gets the validation message	-	-	-	-	true	-

Attributes
name	type	fieldName	description	default
title	{ "text": "string" }	title	-	''
type	{ "text": "\| 'date'\n \| 'datetime-local'\n \| 'email'\n \| 'number'\n \| 'password'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'time'\n \| 'url'" }	type	The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`.	'text'
name	{ "text": "string" }	name	The name of the input, submitted as a name/value pair with form data.	''
value	{ "text": "string" }	value	The current value of the input, submitted as a name/value pair with form data.	''
size	{ "text": "'small' \| 'medium' \| 'large'" }	size	The input's size.	'medium'
filled	{ "text": "boolean" }	filled	Draws a filled input.	false
pill	{ "text": "boolean" }	pill	Draws a pill-style input with rounded edges.	false
label	{ "text": "string" }	label	The input's label. If you need to display HTML, use the `label` slot instead.	''
help-text	{ "text": "string" }	helpText	The input's help text. If you need to display HTML, use the `help-text` slot instead.	''
clearable	{ "text": "boolean" }	clearable	Adds a clear button when the input is not empty.	false
disabled	{ "text": "boolean" }	disabled	Disables the input.	false
placeholder	{ "text": "string" }	placeholder	Placeholder text to show as a hint when the input is empty.	''
readonly	{ "text": "boolean" }	readonly	Makes the input readonly.	false
password-toggle	{ "text": "boolean" }	passwordToggle	Adds a button to toggle the password's visibility. Only applies to password types.	false
password-visible	{ "text": "boolean" }	passwordVisible	Determines whether or not the password is currently visible. Only applies to password input types.	false
no-spin-buttons	{ "text": "boolean" }	noSpinButtons	Hides the browser's built-in increment/decrement spin buttons for number inputs.	false
form	{ "text": "string" }	form	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	''
required	{ "text": "boolean" }	required	Makes the input a required field.	false
pattern	{ "text": "string" }	pattern	A regular expression pattern to validate input against.	-
minlength	{ "text": "number" }	minlength	The minimum length of input that will be considered valid.	-
maxlength	{ "text": "number" }	maxlength	The maximum length of input that will be considered valid.	-
min	{ "text": "number \| string" }	min	The input's minimum value. Only applies to date and number input types.	-
max	{ "text": "number \| string" }	max	The input's maximum value. Only applies to date and number input types.	-
step	{ "text": "number \| 'any'" }	step	Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. Only applies to date and number input types.	-
autocapitalize	{ "text": "'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'" }	autocapitalize	Controls whether and how text input is automatically capitalized as it is entered by the user.	-
autocorrect	{ "text": "'off' \| 'on'" }	autocorrect	Indicates whether the browser's autocorrect feature is on or off.	-
autocomplete	{ "text": "string" }	autocomplete	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.	-
autofocus	{ "text": "boolean" }	autofocus	Indicates that the input should receive focus on page load.	-
enterkeyhint	{ "text": "'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'" }	enterkeyhint	Used to customize the label or icon of the Enter key on virtual keyboards.	-
spellcheck	{ "text": "boolean" }	spellcheck	Enables spell checking on the input.	true
inputmode	{ "text": "'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'" }	inputmode	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.	-

CSS Parts
name	description
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The input's wrapper.
form-control-help-text	The help text's wrapper.
base	The component's base wrapper.
input	The internal `<input>` control.
prefix	The container that wraps the prefix.
clear-button	The clear button.
password-toggle-button	The password toggle button.
suffix	The container that wraps the suffix.

Slots
name	description
label	The input's label. Alternatively, you can use the `label` attribute.
prefix	Used to prepend a presentational icon or similar element to the input.
suffix	Used to append a presentational icon or similar element to the input.
clear-icon	An icon to use in lieu of the default clear icon.
show-password-icon	An icon to use in lieu of the default show password icon.
hide-password-icon	An icon to use in lieu of the default hide password icon.
help-text	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Events
name	description	reactName	eventName
sl-blur	Emitted when the control loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when an alteration to the control's value is committed by the user.	onSlChange	SlChangeEvent
sl-clear	Emitted when the clear button is activated.	onSlClear	SlClearEvent
sl-focus	Emitted when the control gains focus.	onSlFocus	SlFocusEvent
sl-input	Emitted when the control receives input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleDisabledChange

handleStepChange

handleValueChange

focus

Sets focus on the input.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the input.

select

Selects all the text in the input.

setSelectionRange

Sets the start and end positions of the text selection (0-based).

parameters
name	type	default
selectionStart	{ "text": "number" }	-
selectionEnd	{ "text": "number" }	-
selectionDirection	{ "text": "'forward' \| 'backward' \| 'none'" }	'none'

setRangeText

Replaces a range of text with a new string.

parameters
name	type	optional	default
replacement	{ "text": "string" }	-	-
start	{ "text": "number" }	true	-
end	{ "text": "number" }	true	-
selectMode	{ "text": "'select' \| 'start' \| 'end' \| 'preserve'" }	-	'preserve'

showPicker

Displays the browser picker for an input element (only works if the browser supports it for the input type).

stepUp

Increments the value of a numeric input type by the value of the step attribute.

stepDown

Decrements the value of a numeric input type by the value of the step attribute.

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	type
message	{ "text": "string" }

Properties
name	type
defaultSlot	{ "text": "HTMLSlotElement" }

Slots
name	description
	The menu's content, including menu items, menu labels, and dividers.

Events
name	type	description	reactName	eventName
sl-select	{ "text": "{ item: SlMenuItem }" }	Emitted when a menu item is selected.	onSlSelect	SlSelectEvent

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon, 'sl-popup': SlPopup, 'sl-spinner': SlSpinner }	-	-	-	true
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-
menuItem	{ "text": "HTMLElement" }	-	-	-	-	-
type	{ "text": "'normal' \| 'checkbox'" }	'normal'	The type of menu item to render. To use `checked`, this value must be set to `checkbox`.	type	-	-
checked	{ "text": "boolean" }	false	Draws the item in a checked state.	checked	true	-
value	{ "text": "string" }	''	A unique value to store in the menu item. This can be used as a way to identify menu items when selected.	value	-	-
loading	{ "text": "boolean" }	false	Draws the menu item in a loading state.	loading	true	-
disabled	{ "text": "boolean" }	false	Draws the menu item in a disabled state, preventing selection.	disabled	true	-

Attributes
name	type	default	description	fieldName
type	{ "text": "'normal' \| 'checkbox'" }	'normal'	The type of menu item to render. To use `checked`, this value must be set to `checkbox`.	type
checked	{ "text": "boolean" }	false	Draws the item in a checked state.	checked
value	{ "text": "string" }	''	A unique value to store in the menu item. This can be used as a way to identify menu items when selected.	value
loading	{ "text": "boolean" }	false	Draws the menu item in a loading state.	loading
disabled	{ "text": "boolean" }	false	Draws the menu item in a disabled state, preventing selection.	disabled

CSS Properties
name	description	default
--submenu-offset	The distance submenus shift to overlap the parent menu.	-2px

CSS Parts
name	description
base	The component's base wrapper.
checked-icon	The checked icon, which is only visible when the menu item is checked.
prefix	The prefix container.
label	The menu item label.
suffix	The suffix container.
spinner	The spinner that shows when the menu item is in the loading state.
spinner__base	The spinner's base part.
submenu-icon	The submenu icon, visible only when the menu item has a submenu (not yet implemented).

Slots
name	description
	The menu item's label.
prefix	Used to prepend an icon or similar element to the menu item.
suffix	Used to append an icon or similar element to the menu item.
submenu	Used to denote a nested menu.

Methods
name	description
handleCheckedChange	-
handleDisabledChange	-
handleTypeChange	-
getTextLabel	Returns a text label based on the contents of the menu item's default slot.
isSubmenu	-

CSS Parts
name	description
base	The component's base wrapper.

Slots
name	description
	The menu label's content.

sl-mutation-observer

Properties
name	type	description	attribute	reflects	default
attr	{ "text": "string" }	Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g. `attr="class id title"`. To watch all attributes, use `*`.	attr	true	-
attrOldValue	{ "text": "boolean" }	Indicates whether or not the attribute's previous value should be recorded when monitoring changes.	attr-old-value	true	false
charData	{ "text": "boolean" }	Watches for changes to the character data contained within the node.	char-data	true	false
charDataOldValue	{ "text": "boolean" }	Indicates whether or not the previous value of the node's text should be recorded.	char-data-old-value	true	false
childList	{ "text": "boolean" }	Watches for the addition or removal of new child nodes.	child-list	true	false
disabled	{ "text": "boolean" }	Disables the observer.	disabled	true	false

Attributes
name	type	description	fieldName	default
attr	{ "text": "string" }	Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g. `attr="class id title"`. To watch all attributes, use `*`.	attr	-
attr-old-value	{ "text": "boolean" }	Indicates whether or not the attribute's previous value should be recorded when monitoring changes.	attrOldValue	false
char-data	{ "text": "boolean" }	Watches for changes to the character data contained within the node.	charData	false
char-data-old-value	{ "text": "boolean" }	Indicates whether or not the previous value of the node's text should be recorded.	charDataOldValue	false
child-list	{ "text": "boolean" }	Watches for the addition or removal of new child nodes.	childList	false
disabled	{ "text": "boolean" }	Disables the observer.	disabled	false

Slots
name	description
	The content to watch for mutations.

Events
name	type	description	reactName	eventName
sl-mutation	{ "text": "{ mutationList: MutationRecord[] }" }	Emitted when a mutation occurs.	onSlMutation	SlMutationEvent

Methods
name
handleDisabledChange
handleChange

sl-option

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	-	-	-	true
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-
current	{ "text": "boolean" }	false	-	-	-	-
selected	{ "text": "boolean" }	false	-	-	-	-
hasHover	{ "text": "boolean" }	false	-	-	-	-
value	{ "text": "string" }	''	The option's value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing multiple values.	value	true	-
disabled	{ "text": "boolean" }	false	Draws the option in a disabled state, preventing selection.	disabled	true	-

Attributes
name	type	default	description	fieldName
value	{ "text": "string" }	''	The option's value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing multiple values.	value
disabled	{ "text": "boolean" }	false	Draws the option in a disabled state, preventing selection.	disabled

CSS Parts
name	description
checked-icon	The checked icon, an `<sl-icon>` element.
base	The component's base wrapper.
label	The option's label.
prefix	The container that wraps the prefix.
suffix	The container that wraps the suffix.

Slots
name	description
	The option's label.
prefix	Used to prepend an icon or similar element to the menu item.
suffix	Used to append an icon or similar element to the menu item.

Methods
name	description
handleDisabledChange	-
handleSelectedChange	-
handleValueChange	-
getTextLabel	Returns a plain text label based on the option's content.

Properties
name	type	description	attribute	default	reflects
popup	{ "text": "HTMLElement" }	A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.	-	-	-
anchor	{ "text": "Element \| string \| VirtualElement" }	The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the `anchor` slot instead.	anchor	-	-
active	{ "text": "boolean" }	Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn down and the popup will be hidden.	active	false	true
placement	{ "text": "\| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'" }	The preferred placement of the popup. Note that the actual placement will vary as configured to keep the panel inside of the viewport.	placement	'top'	true
strategy	{ "text": "'absolute' \| 'fixed'" }	Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is clipped, using a `fixed` position strategy can often workaround it.	strategy	'absolute'	true
distance	{ "text": "number" }	The distance in pixels from which to offset the panel away from its anchor.	distance	0	-
skidding	{ "text": "number" }	The distance in pixels from which to offset the panel along its anchor.	skidding	0	-
arrow	{ "text": "boolean" }	Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and `--arrow-color` custom properties. For additional customizations, you can also target the arrow using `::part(arrow)` in your stylesheet.	arrow	false	-
arrowPlacement	{ "text": "'start' \| 'end' \| 'center' \| 'anchor'" }	The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will align the arrow to the start, end, or center of the popover instead.	arrow-placement	'anchor'	-
arrowPadding	{ "text": "number" }	The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example, this will prevent it from overflowing the corners.	arrow-padding	10	-
flip	{ "text": "boolean" }	When set, placement of the popup will flip to the opposite site to keep it in view. You can use `flipFallbackPlacements` to further configure how the fallback placement is determined.	flip	false	-
flipFallbackPlacements	{ "text": "string" }	If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip fallback strategy will be used instead.	flip-fallback-placements	''	-
flipFallbackStrategy	{ "text": "'best-fit' \| 'initial'" }	When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether the popup should be positioned using the best available fit based on available space or as it was initially preferred.	flip-fallback-strategy	'best-fit'	-
flipBoundary	{ "text": "Element \| Element[]" }	The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can change the boundary by passing a reference to one or more elements to this property.	flipBoundary	-	-
flipPadding	{ "text": "number" }	The amount of padding, in pixels, to exceed before the flip behavior will occur.	flip-padding	0	-
shift	{ "text": "boolean" }	Moves the popup along the axis to keep it in view when clipped.	shift	false	-
shiftBoundary	{ "text": "Element \| Element[]" }	The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can change the boundary by passing a reference to one or more elements to this property.	shiftBoundary	-	-
shiftPadding	{ "text": "number" }	The amount of padding, in pixels, to exceed before the shift behavior will occur.	shift-padding	0	-
autoSize	{ "text": "'horizontal' \| 'vertical' \| 'both'" }	When set, this will cause the popup to automatically resize itself to prevent it from overflowing.	auto-size	-	-
sync	{ "text": "'width' \| 'height' \| 'both'" }	Syncs the popup's width or height to that of the anchor element.	sync	-	-
autoSizeBoundary	{ "text": "Element \| Element[]" }	The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can change the boundary by passing a reference to one or more elements to this property.	autoSizeBoundary	-	-
autoSizePadding	{ "text": "number" }	The amount of padding, in pixels, to exceed before the auto-size behavior will occur.	auto-size-padding	0	-
hoverBridge	{ "text": "boolean" }	When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active.	hover-bridge	false	-

Attributes
name	type	description	fieldName	default
anchor	{ "text": "Element \| string \| VirtualElement" }	The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the `anchor` slot instead.	anchor	-
active	{ "text": "boolean" }	Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn down and the popup will be hidden.	active	false
placement	{ "text": "\| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'" }	The preferred placement of the popup. Note that the actual placement will vary as configured to keep the panel inside of the viewport.	placement	'top'
strategy	{ "text": "'absolute' \| 'fixed'" }	Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is clipped, using a `fixed` position strategy can often workaround it.	strategy	'absolute'
distance	{ "text": "number" }	The distance in pixels from which to offset the panel away from its anchor.	distance	0
skidding	{ "text": "number" }	The distance in pixels from which to offset the panel along its anchor.	skidding	0
arrow	{ "text": "boolean" }	Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and `--arrow-color` custom properties. For additional customizations, you can also target the arrow using `::part(arrow)` in your stylesheet.	arrow	false
arrow-placement	{ "text": "'start' \| 'end' \| 'center' \| 'anchor'" }	The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will align the arrow to the start, end, or center of the popover instead.	arrowPlacement	'anchor'
arrow-padding	{ "text": "number" }	The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example, this will prevent it from overflowing the corners.	arrowPadding	10
flip	{ "text": "boolean" }	When set, placement of the popup will flip to the opposite site to keep it in view. You can use `flipFallbackPlacements` to further configure how the fallback placement is determined.	flip	false
flip-fallback-placements	{ "text": "string" }	If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip fallback strategy will be used instead.	flipFallbackPlacements	''
flip-fallback-strategy	{ "text": "'best-fit' \| 'initial'" }	When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether the popup should be positioned using the best available fit based on available space or as it was initially preferred.	flipFallbackStrategy	'best-fit'
flipBoundary	{ "text": "Element \| Element[]" }	The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can change the boundary by passing a reference to one or more elements to this property.	flipBoundary	-
flip-padding	{ "text": "number" }	The amount of padding, in pixels, to exceed before the flip behavior will occur.	flipPadding	0
shift	{ "text": "boolean" }	Moves the popup along the axis to keep it in view when clipped.	shift	false
shiftBoundary	{ "text": "Element \| Element[]" }	The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can change the boundary by passing a reference to one or more elements to this property.	shiftBoundary	-
shift-padding	{ "text": "number" }	The amount of padding, in pixels, to exceed before the shift behavior will occur.	shiftPadding	0
auto-size	{ "text": "'horizontal' \| 'vertical' \| 'both'" }	When set, this will cause the popup to automatically resize itself to prevent it from overflowing.	autoSize	-
sync	{ "text": "'width' \| 'height' \| 'both'" }	Syncs the popup's width or height to that of the anchor element.	sync	-
autoSizeBoundary	{ "text": "Element \| Element[]" }	The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can change the boundary by passing a reference to one or more elements to this property.	autoSizeBoundary	-
auto-size-padding	{ "text": "number" }	The amount of padding, in pixels, to exceed before the auto-size behavior will occur.	autoSizePadding	0
hover-bridge	{ "text": "boolean" }	When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active.	hoverBridge	false

CSS Properties
name	description	default
--arrow-size	The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used.	6px
--arrow-color	The color of the arrow.	var(--sl-color-neutral-0)
--auto-size-available-width	A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.	-
--auto-size-available-height	A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.	-

CSS Parts
name	description
arrow	The arrow's container. Avoid setting `top\|bottom\|left\|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.
popup	The popup's container. Useful for setting a background color, box shadow, etc.
hover-bridge	The hover bridge element. Only available when the `hover-bridge` option is enabled.

Slots
name	description
	The popup's content.
anchor	The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.

Events
name	description	reactName	eventName
sl-reposition	Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.	onSlReposition	SlRepositionEvent

Methods
name	description
reposition	Forces the popup to recalculate and reposition itself.

sl-progress-bar

Properties
name	type	default	description	attribute	reflects
value	{ "text": "number" }	0	The current progress as a percentage, 0 to 100.	value	true
indeterminate	{ "text": "boolean" }	false	When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.	indeterminate	true
label	{ "text": "string" }	''	A custom label for assistive devices.	label	-

Attributes
name	type	default	description	fieldName
value	{ "text": "number" }	0	The current progress as a percentage, 0 to 100.	value
indeterminate	{ "text": "boolean" }	false	When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.	indeterminate
label	{ "text": "string" }	''	A custom label for assistive devices.	label

CSS Properties
name	description
--height	The progress bar's height.
--track-color	The color of the track.
--indicator-color	The color of the indicator.
--label-color	The color of the label.

CSS Parts
name	description
base	The component's base wrapper.
indicator	The progress bar's indicator.
label	The progress bar's label.

Slots
name	description
	A label to show inside the progress indicator.

sl-progress-ring

Properties
name	type	default	description	attribute	reflects
indicator	{ "text": "SVGCircleElement" }	-	-	-	-
indicatorOffset	{ "text": "string" }	-	-	-	-
value	{ "text": "number" }	0	The current progress as a percentage, 0 to 100.	value	true
label	{ "text": "string" }	''	A custom label for assistive devices.	label	-

Attributes
name	type	default	description	fieldName
value	{ "text": "number" }	0	The current progress as a percentage, 0 to 100.	value
label	{ "text": "string" }	''	A custom label for assistive devices.	label

CSS Properties
name	description
--size	The diameter of the progress ring (cannot be a percentage).
--track-width	The width of the track.
--track-color	The color of the track.
--indicator-width	The width of the indicator. Defaults to the track width.
--indicator-color	The color of the indicator.
--indicator-transition-duration	The duration of the indicator's transition when the value changes.

CSS Parts
name	description
base	The component's base wrapper.
label	The progress ring label.

Slots
name	description
	A label to show inside the ring.

sl-radio

Properties
name	type	default	description	attribute	reflects	static	privacy
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	-	-	-	true	-
checked	{ "text": "boolean" }	false	-	-	-	-	-
hasFocus	{ "text": "boolean" }	false	-	-	-	-	protected
value	{ "text": "string" }	-	The radio's value. When selected, the radio group will receive this value.	value	-	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this attribute can typically be omitted.	size	true	-	-
disabled	{ "text": "boolean" }	false	Disables the radio.	disabled	true	-	-

Attributes
name	type	description	fieldName	default
value	{ "text": "string" }	The radio's value. When selected, the radio group will receive this value.	value	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this attribute can typically be omitted.	size	'medium'
disabled	{ "text": "boolean" }	Disables the radio.	disabled	false

CSS Parts
name	description
base	The component's base wrapper.
control	The circular container that wraps the radio's checked state.
control--checked	The radio control when the radio is checked.
checked-icon	The checked icon, an `<sl-icon>` element.
label	The container that wraps the radio's label.

Slots
name	description
	The radio's label.

Events
name	description	reactName	eventName
sl-blur	Emitted when the control loses focus.	onSlBlur	SlBlurEvent
sl-focus	Emitted when the control gains focus.	onSlFocus	SlFocusEvent

Methods
name
handleCheckedChange
handleDisabledChange

sl-qr-code

Properties
name	type	default	description	attribute
canvas	{ "text": "HTMLElement" }	-	-	-
value	{ "text": "string" }	''	The QR code's value.	value
label	{ "text": "string" }	''	The label for assistive devices to announce. If unspecified, the value will be used instead.	label
size	{ "text": "number" }	128	The size of the QR code, in pixels.	size
fill	{ "text": "string" }	'black'	The fill color. This can be any valid CSS color, but not a CSS custom property.	fill
background	{ "text": "string" }	'white'	The background color. This can be any valid CSS color or `transparent`. It cannot be a CSS custom property.	background
radius	{ "text": "number" }	0	The edge radius of each module. Must be between 0 and 0.5.	radius
errorCorrection	{ "text": "'L' \| 'M' \| 'Q' \| 'H'" }	'H'	The level of error correction to use. [Learn more](https://www.qrcode.com/en/about/error_correction.html)	error-correction

Attributes
name	type	default	description	fieldName
value	{ "text": "string" }	''	The QR code's value.	value
label	{ "text": "string" }	''	The label for assistive devices to announce. If unspecified, the value will be used instead.	label
size	{ "text": "number" }	128	The size of the QR code, in pixels.	size
fill	{ "text": "string" }	'black'	The fill color. This can be any valid CSS color, but not a CSS custom property.	fill
background	{ "text": "string" }	'white'	The background color. This can be any valid CSS color or `transparent`. It cannot be a CSS custom property.	background
radius	{ "text": "number" }	0	The edge radius of each module. Must be between 0 and 0.5.	radius
error-correction	{ "text": "'L' \| 'M' \| 'Q' \| 'H'" }	'H'	The level of error correction to use. [Learn more](https://www.qrcode.com/en/about/error_correction.html)	errorCorrection

CSS Parts
name	description
base	The component's base wrapper.

Methods
name
generate

sl-radio-button

Properties
name	type	default	description	attribute	reflects	privacy
input	{ "text": "HTMLInputElement" }	-	-	-	-	-
hiddenInput	{ "text": "HTMLInputElement" }	-	-	-	-	-
hasFocus	{ "text": "boolean" }	false	-	-	-	protected
value	{ "text": "string" }	-	The radio's value. When selected, the radio group will receive this value.	value	-	-
disabled	{ "text": "boolean" }	false	Disables the radio button.	disabled	true	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so this attribute can typically be omitted.	size	true	-
pill	{ "text": "boolean" }	false	Draws a pill-style radio button with rounded edges.	pill	true	-

Attributes
name	type	description	fieldName	default
value	{ "text": "string" }	The radio's value. When selected, the radio group will receive this value.	value	-
disabled	{ "text": "boolean" }	Disables the radio button.	disabled	false
size	{ "text": "'small' \| 'medium' \| 'large'" }	The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so this attribute can typically be omitted.	size	'medium'
pill	{ "text": "boolean" }	Draws a pill-style radio button with rounded edges.	pill	false

CSS Parts
name	description
base	The component's base wrapper.
button	The internal `<button>` element.
button--checked	The internal button element when the radio button is checked.
prefix	The container that wraps the prefix.
label	The container that wraps the radio button's label.
suffix	The container that wraps the suffix.

Slots
name	description
	The radio button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar element.

Events
name	description	reactName	eventName
sl-blur	Emitted when the button loses focus.	onSlBlur	SlBlurEvent
sl-focus	Emitted when the button gains focus.	onSlFocus	SlFocusEvent

Methods

name

description

parameters

handleDisabledChange

focus

Sets focus on the radio button.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the radio button.

sl-radio-group

Properties
name	type	default	description	attribute	reflects	readonly	static	privacy
dependencies	{ "text": "object" }	{ 'sl-button-group': SlButtonGroup }	-	-	-	-	true	-
formControlController	-	new FormControlController(this)	-	-	-	true	-	protected
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-	-	-
validationInput	{ "text": "HTMLInputElement" }	-	-	-	-	-	-	-
defaultValue	{ "text": "string" }	''	-	-	-	-	-	-
label	{ "text": "string" }	''	The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.	label	-	-	-	-
helpText	{ "text": "string" }	''	The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.	help-text	-	-	-	-
name	{ "text": "string" }	'option'	The name of the radio group, submitted as a name/value pair with form data.	name	-	-	-	-
value	{ "text": "string" }	''	The current value of the radio group, submitted as a name/value pair with form data.	value	true	-	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	The radio group's size. This size will be applied to all child radios and radio buttons.	size	true	-	-	-
form	{ "text": "string" }	''	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	form	true	-	-	-
required	{ "text": "boolean" }	false	Ensures a child radio is checked before allowing the containing form to submit.	required	true	-	-	-
validity	-	-	Gets the validity state object	-	-	true	-	-
validationMessage	-	-	Gets the validation message	-	-	true	-	-

Attributes
name	type	default	description	fieldName
label	{ "text": "string" }	''	The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.	label
help-text	{ "text": "string" }	''	The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.	helpText
name	{ "text": "string" }	'option'	The name of the radio group, submitted as a name/value pair with form data.	name
value	{ "text": "string" }	''	The current value of the radio group, submitted as a name/value pair with form data.	value
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	The radio group's size. This size will be applied to all child radios and radio buttons.	size
form	{ "text": "string" }	''	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	form
required	{ "text": "boolean" }	false	Ensures a child radio is checked before allowing the containing form to submit.	required

CSS Parts
name	description
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The input's wrapper.
form-control-help-text	The help text's wrapper.
button-group	The button group that wraps radio buttons.
button-group__base	The button group's `base` part.

Slots
name	description
	The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
label	The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
help-text	Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.

Events
name	description	reactName	eventName
sl-change	Emitted when the radio group's selected value changes.	onSlChange	SlChangeEvent
sl-input	Emitted when the radio group receives user input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

return

parameters

handleSizeChange

handleValueChange

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

{ "type": { "text": "boolean" } }

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	default
message	''

sl-range

Properties
name	type	description	default	attribute	reflects	readonly
input	{ "text": "HTMLInputElement" }	-	-	-	-	-
output	{ "text": "HTMLOutputElement \| null" }	-	-	-	-	-
title	{ "text": "string" }	-	''	title	-	-
name	{ "text": "string" }	The name of the range, submitted as a name/value pair with form data.	''	name	-	-
value	{ "text": "number" }	The current value of the range, submitted as a name/value pair with form data.	0	value	-	-
label	{ "text": "string" }	The range's label. If you need to display HTML, use the `label` slot instead.	''	label	-	-
helpText	{ "text": "string" }	The range's help text. If you need to display HTML, use the help-text slot instead.	''	help-text	-	-
disabled	{ "text": "boolean" }	Disables the range.	false	disabled	true	-
min	{ "text": "number" }	The minimum acceptable value of the range.	0	min	-	-
max	{ "text": "number" }	The maximum acceptable value of the range.	100	max	-	-
step	{ "text": "number" }	The interval at which the range will increase and decrease.	1	step	-	-
tooltip	{ "text": "'top' \| 'bottom' \| 'none'" }	The preferred placement of the range's tooltip.	'top'	tooltip	-	-
tooltipFormatter	{ "text": "(value: number) => string" }	A function used to format the tooltip's value. The range's value is passed as the first and only argument. The function should return a string to display in the tooltip.	-	-	-	-
form	{ "text": "string" }	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	''	form	true	-
defaultValue	{ "text": "number" }	The default value of the form control. Primarily used for resetting the form control.	0	-	-	-
validity	-	Gets the validity state object	-	-	-	true
validationMessage	-	Gets the validation message	-	-	-	true

Attributes
name	type	default	fieldName	description
title	{ "text": "string" }	''	title	-
name	{ "text": "string" }	''	name	The name of the range, submitted as a name/value pair with form data.
value	{ "text": "number" }	0	value	The current value of the range, submitted as a name/value pair with form data.
label	{ "text": "string" }	''	label	The range's label. If you need to display HTML, use the `label` slot instead.
help-text	{ "text": "string" }	''	helpText	The range's help text. If you need to display HTML, use the help-text slot instead.
disabled	{ "text": "boolean" }	false	disabled	Disables the range.
min	{ "text": "number" }	0	min	The minimum acceptable value of the range.
max	{ "text": "number" }	100	max	The maximum acceptable value of the range.
step	{ "text": "number" }	1	step	The interval at which the range will increase and decrease.
tooltip	{ "text": "'top' \| 'bottom' \| 'none'" }	'top'	tooltip	The preferred placement of the range's tooltip.
form	{ "text": "string" }	''	form	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.

CSS Properties
name	description
--thumb-size	The size of the thumb.
--tooltip-offset	The vertical distance the tooltip is offset from the track.
--track-color-active	The color of the portion of the track that represents the current value.
--track-color-inactive	The of the portion of the track that represents the remaining value.
--track-height	The height of the track.
--track-active-offset	The point of origin of the active track.

CSS Parts
name	description
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The range's wrapper.
form-control-help-text	The help text's wrapper.
base	The component's base wrapper.
input	The internal `<input>` element.
tooltip	The range's tooltip.

Slots
name	description
label	The range's label. Alternatively, you can use the `label` attribute.
help-text	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Events
name	description	reactName	eventName
sl-blur	Emitted when the control loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when an alteration to the control's value is committed by the user.	onSlChange	SlChangeEvent
sl-focus	Emitted when the control gains focus.	onSlFocus	SlFocusEvent
sl-input	Emitted when the control receives input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleValueChange

handleDisabledChange

syncRange

focus

Sets focus on the range.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the range.

stepUp

Increments the value of the range by the value of the step attribute.

stepDown

Decrements the value of the range by the value of the step attribute.

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	type
message	{ "text": "string" }

sl-rating

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	-	-	-	true
rating	{ "text": "HTMLElement" }	-	-	-	-	-
label	{ "text": "string" }	''	A label that describes the rating to assistive devices.	label	-	-
value	{ "text": "number" }	0	The current rating.	value	-	-
max	{ "text": "number" }	5	The highest rating to show.	max	-	-
precision	{ "text": "number" }	1	The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this attribute to `0.5`.	precision	-	-
readonly	{ "text": "boolean" }	false	Makes the rating readonly.	readonly	true	-
disabled	{ "text": "boolean" }	false	Disables the rating.	disabled	true	-
getSymbol	{ "text": "(value: number) => string" }	-	A function that customizes the symbol to be rendered. The first and only argument is the rating's current value. The function should return a string containing trusted HTML of the symbol to render at the specified value. Works well with `<sl-icon>` elements.	getSymbol	-	-

Attributes
name	type	description	fieldName	default
label	{ "text": "string" }	A label that describes the rating to assistive devices.	label	''
value	{ "text": "number" }	The current rating.	value	0
max	{ "text": "number" }	The highest rating to show.	max	5
precision	{ "text": "number" }	The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this attribute to `0.5`.	precision	1
readonly	{ "text": "boolean" }	Makes the rating readonly.	readonly	false
disabled	{ "text": "boolean" }	Disables the rating.	disabled	false
getSymbol	{ "text": "(value: number) => string" }	A function that customizes the symbol to be rendered. The first and only argument is the rating's current value. The function should return a string containing trusted HTML of the symbol to render at the specified value. Works well with `<sl-icon>` elements.	getSymbol	-

CSS Properties
name	description
--symbol-color	The inactive color for symbols.
--symbol-color-active	The active color for symbols.
--symbol-size	The size of symbols.
--symbol-spacing	The spacing to use around symbols.

CSS Parts
name	description
base	The component's base wrapper.

Events
name	description	reactName	eventName	type
sl-change	Emitted when the rating's value changes.	onSlChange	SlChangeEvent	-
sl-hover	Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.	onSlHover	SlHoverEvent	{ "text": "{ phase: 'start' \| 'move' \| 'end', value: number }" }

Methods

name

description

parameters

handleHoverValueChange

handleIsHoveringChange

focus

Sets focus on the rating.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the rating.

sl-relative-time

Properties
name	type	default	description	attribute
date	{ "text": "Date \| string" }	new Date()	The date from which to calculate time from. If not set, the current date and time will be used. When passing a string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).	date
format	{ "text": "'long' \| 'short' \| 'narrow'" }	'long'	The formatting style to use.	format
numeric	{ "text": "'always' \| 'auto'" }	'auto'	When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as "1 day ago" and "in 1 day" will be shown.	numeric
sync	{ "text": "boolean" }	false	Keep the displayed value up to date as time passes.	sync

Attributes
name	type	default	description	fieldName
date	{ "text": "Date \| string" }	new Date()	The date from which to calculate time from. If not set, the current date and time will be used. When passing a string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).	date
format	{ "text": "'long' \| 'short' \| 'narrow'" }	'long'	The formatting style to use.	format
numeric	{ "text": "'always' \| 'auto'" }	'auto'	When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as "1 day ago" and "in 1 day" will be shown.	numeric
sync	{ "text": "boolean" }	false	Keep the displayed value up to date as time passes.	sync

sl-resize-observer

Properties
name	type	default	description	attribute	reflects
disabled	{ "text": "boolean" }	false	Disables the observer.	disabled	true

Attributes
name	type	default	description	fieldName
disabled	{ "text": "boolean" }	false	Disables the observer.	disabled

Slots
name	description
	One or more elements to watch for resizing.

Events
name	type	description	reactName	eventName
sl-resize	{ "text": "{ entries: ResizeObserverEntry[] }" }	Emitted when the element is resized.	onSlResize	SlResizeEvent

Methods
name
handleDisabledChange

sl-select

Properties
name	type	default	description	attribute	reflects	readonly	static	privacy
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon, 'sl-popup': SlPopup, 'sl-tag': SlTag }	-	-	-	-	true	-
popup	{ "text": "SlPopup" }	-	-	-	-	-	-	-
combobox	{ "text": "HTMLSlotElement" }	-	-	-	-	-	-	-
displayInput	{ "text": "HTMLInputElement" }	-	-	-	-	-	-	-
valueInput	{ "text": "HTMLInputElement" }	-	-	-	-	-	-	-
listbox	{ "text": "HTMLSlotElement" }	-	-	-	-	-	-	-
displayLabel	{ "text": "string" }	''	-	-	-	-	-	-
currentOption	{ "text": "SlOption" }	-	-	-	-	-	-	-
selectedOptions	{ "text": "SlOption[]" }	[]	-	-	-	-	-	-
name	{ "text": "string" }	''	The name of the select, submitted as a name/value pair with form data.	name	-	-	-	-
value	{ "text": "string \| string[]" }	''	The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the value attribute will be a space-delimited list of values based on the options selected, and the value property will be an array. For this reason, values must not contain spaces.	value	-	-	-	-
defaultValue	{ "text": "string \| string[]" }	''	The default value of the form control. Primarily used for resetting the form control.	-	-	-	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	The select's size.	size	true	-	-	-
placeholder	{ "text": "string" }	''	Placeholder text to show as a hint when the select is empty.	placeholder	-	-	-	-
multiple	{ "text": "boolean" }	false	Allows more than one option to be selected.	multiple	true	-	-	-
maxOptionsVisible	{ "text": "number" }	3	The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to 0 to remove the limit.	max-options-visible	-	-	-	-
disabled	{ "text": "boolean" }	false	Disables the select control.	disabled	true	-	-	-
clearable	{ "text": "boolean" }	false	Adds a clear button when the select is not empty.	clearable	-	-	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can use the `show()` and `hide()` methods and this attribute will reflect the select's open state.	open	true	-	-	-
hoist	{ "text": "boolean" }	false	Enable this option to prevent the listbox from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist	-	-	-	-
filled	{ "text": "boolean" }	false	Draws a filled select.	filled	true	-	-	-
pill	{ "text": "boolean" }	false	Draws a pill-style select with rounded edges.	pill	true	-	-	-
label	{ "text": "string" }	''	The select's label. If you need to display HTML, use the `label` slot instead.	label	-	-	-	-
placement	{ "text": "'top' \| 'bottom'" }	'bottom'	The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox inside of the viewport.	placement	true	-	-	-
helpText	{ "text": "string" }	''	The select's help text. If you need to display HTML, use the `help-text` slot instead.	help-text	-	-	-	-
form	{ "text": "string" }	''	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	form	true	-	-	-
required	{ "text": "boolean" }	false	The select's required attribute.	required	true	-	-	-
getTag	{ "text": "(option: SlOption, index: number) => TemplateResult \| string \| HTMLElement" }	-	A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.	getTag	-	-	-	-
validity	-	-	Gets the validity state object	-	-	true	-	-
validationMessage	-	-	Gets the validation message	-	-	true	-	-
tags	-	-	-	-	-	true	-	protected

Attributes
name	type	description	fieldName	default
name	{ "text": "string" }	The name of the select, submitted as a name/value pair with form data.	name	''
value	{ "text": "string \| string[]" }	The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the value attribute will be a space-delimited list of values based on the options selected, and the value property will be an array. For this reason, values must not contain spaces.	value	''
size	{ "text": "'small' \| 'medium' \| 'large'" }	The select's size.	size	'medium'
placeholder	{ "text": "string" }	Placeholder text to show as a hint when the select is empty.	placeholder	''
multiple	{ "text": "boolean" }	Allows more than one option to be selected.	multiple	false
max-options-visible	{ "text": "number" }	The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to 0 to remove the limit.	maxOptionsVisible	3
disabled	{ "text": "boolean" }	Disables the select control.	disabled	false
clearable	{ "text": "boolean" }	Adds a clear button when the select is not empty.	clearable	false
open	{ "text": "boolean" }	Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can use the `show()` and `hide()` methods and this attribute will reflect the select's open state.	open	false
hoist	{ "text": "boolean" }	Enable this option to prevent the listbox from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist	false
filled	{ "text": "boolean" }	Draws a filled select.	filled	false
pill	{ "text": "boolean" }	Draws a pill-style select with rounded edges.	pill	false
label	{ "text": "string" }	The select's label. If you need to display HTML, use the `label` slot instead.	label	''
placement	{ "text": "'top' \| 'bottom'" }	The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox inside of the viewport.	placement	'bottom'
help-text	{ "text": "string" }	The select's help text. If you need to display HTML, use the `help-text` slot instead.	helpText	''
form	{ "text": "string" }	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	form	''
required	{ "text": "boolean" }	The select's required attribute.	required	false
getTag	{ "text": "(option: SlOption, index: number) => TemplateResult \| string \| HTMLElement" }	A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.	getTag	-

CSS Parts
name	description
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The select's wrapper.
form-control-help-text	The help text's wrapper.
combobox	The container the wraps the prefix, combobox, clear icon, and expand button.
prefix	The container that wraps the prefix slot.
display-input	The element that displays the selected option's label, an `<input>` element.
listbox	The listbox container where options are slotted.
tags	The container that houses option tags when `multiselect` is used.
tag	The individual tags that represent each multiselect option.
tag__base	The tag's base part.
tag__content	The tag's content part.
tag__remove-button	The tag's remove button.
tag__remove-button__base	The tag's remove button base part.
clear-button	The clear button.
expand-icon	The container that wraps the expand icon.

Slots
name	description
	The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
label	The input's label. Alternatively, you can use the `label` attribute.
prefix	Used to prepend a presentational icon or similar element to the combobox.
clear-icon	An icon to use in lieu of the default clear icon.
expand-icon	The icon to show when the control is expanded and collapsed. Rotates on open and close.
help-text	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Events
name	description	reactName	eventName
sl-change	Emitted when the control's value changes.	onSlChange	SlChangeEvent
sl-clear	Emitted when the control's value is cleared.	onSlClear	SlClearEvent
sl-input	Emitted when the control receives input.	onSlInput	SlInputEvent
sl-focus	Emitted when the control gains focus.	onSlFocus	SlFocusEvent
sl-blur	Emitted when the control loses focus.	onSlBlur	SlBlurEvent
sl-show	Emitted when the select's menu opens.	onSlShow	SlShowEvent
sl-after-show	Emitted after the select's menu opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent
sl-hide	Emitted when the select's menu closes.	onSlHide	SlHideEvent
sl-after-hide	Emitted after the select's menu closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleDisabledChange

handleValueChange

handleOpenChange

show

Shows the listbox.

hide

Hides the listbox.

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	type
message	{ "text": "string" }

focus

Sets focus on the control.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the control.

sl-skeleton

Properties
name	type	default	description	attribute
effect	{ "text": "'pulse' \| 'sheen' \| 'none'" }	'none'	Determines which effect the skeleton will use.	effect

Attributes
name	type	default	description	fieldName
effect	{ "text": "'pulse' \| 'sheen' \| 'none'" }	'none'	Determines which effect the skeleton will use.	effect

CSS Properties
name	description
--border-radius	The skeleton's border radius.
--color	The color of the skeleton.
--sheen-color	The sheen color when the skeleton is in its loading state.

CSS Parts
name	description
base	The component's base wrapper.
indicator	The skeleton's indicator which is responsible for its color and animation.

sl-spinner

CSS Properties
name	description
--track-width	The width of the track.
--track-color	The color of the track.
--indicator-color	The color of the spinner's indicator.
--speed	The time it takes for the spinner to complete one animation cycle.

CSS Parts
name	description
base	The component's base wrapper.

sl-split-panel

Properties
name	type	description	attribute	default	reflects
divider	{ "text": "HTMLElement" }	-	-	-	-
position	{ "text": "number" }	The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the container's initial size.	position	50	true
positionInPixels	{ "text": "number" }	The current position of the divider from the primary panel's edge in pixels.	position-in-pixels	-	-
vertical	{ "text": "boolean" }	Draws the split panel in a vertical orientation with the start and end panels stacked.	vertical	false	true
disabled	{ "text": "boolean" }	Disables resizing. Note that the position may still change as a result of resizing the host element.	disabled	false	true
primary	{ "text": "'start' \| 'end' \| undefined" }	If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the host element is resized.	primary	-	-
snap	{ "text": "string \| undefined" }	One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g. `"100px 50%"`.	snap	-	-
snapThreshold	{ "text": "number" }	How close the divider must be to a snap point until snapping occurs.	snap-threshold	12	-

Attributes
name	type	description	fieldName	default
position	{ "text": "number" }	The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the container's initial size.	position	50
position-in-pixels	{ "text": "number" }	The current position of the divider from the primary panel's edge in pixels.	positionInPixels	-
vertical	{ "text": "boolean" }	Draws the split panel in a vertical orientation with the start and end panels stacked.	vertical	false
disabled	{ "text": "boolean" }	Disables resizing. Note that the position may still change as a result of resizing the host element.	disabled	false
primary	{ "text": "'start' \| 'end' \| undefined" }	If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the host element is resized.	primary	-
snap	{ "text": "string \| undefined" }	One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g. `"100px 50%"`.	snap	-
snap-threshold	{ "text": "number" }	How close the divider must be to a snap point until snapping occurs.	snapThreshold	12

CSS Properties
name	description	default
--divider-width	The width of the visible divider.	4px
--divider-hit-area	The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging.	12px
--min	The minimum allowed size of the primary panel.	0
--max	The maximum allowed size of the primary panel.	100%

CSS Parts
name	description
start	The start panel.
end	The end panel.
panel	Targets both the start and end panels.
divider	The divider that separates the start and end panels.

Slots
name	description
start	Content to place in the start panel.
end	Content to place in the end panel.
divider	The divider. Useful for slotting in a custom icon that renders as a handle.

Events
name	description	reactName	eventName
sl-reposition	Emitted when the divider's position changes.	onSlReposition	SlRepositionEvent

Methods
name
handlePositionChange
handlePositionInPixelsChange
handleVerticalChange

sl-tab

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon-button': SlIconButton }	-	-	-	true
tab	{ "text": "HTMLElement" }	-	-	-	-	-
panel	{ "text": "string" }	''	The name of the tab panel this tab is associated with. The panel must be located in the same tab group.	panel	true	-
active	{ "text": "boolean" }	false	Draws the tab in an active state.	active	true	-
closable	{ "text": "boolean" }	false	Makes the tab closable and shows a close button.	closable	-	-
disabled	{ "text": "boolean" }	false	Disables the tab and prevents selection.	disabled	true	-

Attributes
name	type	default	description	fieldName
panel	{ "text": "string" }	''	The name of the tab panel this tab is associated with. The panel must be located in the same tab group.	panel
active	{ "text": "boolean" }	false	Draws the tab in an active state.	active
closable	{ "text": "boolean" }	false	Makes the tab closable and shows a close button.	closable
disabled	{ "text": "boolean" }	false	Disables the tab and prevents selection.	disabled

CSS Parts
name	description
base	The component's base wrapper.
close-button	The close button, an `<sl-icon-button>`.
close-button__base	The close button's exported `base` part.

Slots
name	description
	The tab's label.

Events
name	description	reactName	eventName
sl-close	Emitted when the tab is closable and the close button is activated.	onSlClose	SlCloseEvent

Methods

name

description

parameters

handleActiveChange

handleDisabledChange

focus

Sets focus to the tab.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the tab.

sl-tab-group

Properties
name	type	default	description	attribute	static
dependencies	{ "text": "object" }	{ 'sl-icon-button': SlIconButton }	-	-	true
tabGroup	{ "text": "HTMLElement" }	-	-	-	-
body	{ "text": "HTMLSlotElement" }	-	-	-	-
nav	{ "text": "HTMLElement" }	-	-	-	-
indicator	{ "text": "HTMLElement" }	-	-	-	-
placement	{ "text": "'top' \| 'bottom' \| 'start' \| 'end'" }	'top'	The placement of the tabs.	placement	-
activation	{ "text": "'auto' \| 'manual'" }	'auto'	When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to manual, the tab will receive focus but will not show until the user presses spacebar or enter.	activation	-
noScrollControls	{ "text": "boolean" }	false	Disables the scroll arrows that appear when tabs overflow.	no-scroll-controls	-

Attributes
name	type	default	description	fieldName
placement	{ "text": "'top' \| 'bottom' \| 'start' \| 'end'" }	'top'	The placement of the tabs.	placement
activation	{ "text": "'auto' \| 'manual'" }	'auto'	When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to manual, the tab will receive focus but will not show until the user presses spacebar or enter.	activation
no-scroll-controls	{ "text": "boolean" }	false	Disables the scroll arrows that appear when tabs overflow.	noScrollControls

CSS Properties
name	description
--indicator-color	The color of the active tab indicator.
--track-color	The color of the indicator's track (the line that separates tabs from panels).
--track-width	The width of the indicator's track (the line that separates tabs from panels).

CSS Parts
name	description
base	The component's base wrapper.
nav	The tab group's navigation container where tabs are slotted in.
tabs	The container that wraps the tabs.
active-tab-indicator	The line that highlights the currently selected tab.
body	The tab group's body where tab panels are slotted in.
scroll-button	The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
scroll-button--start	The starting scroll button.
scroll-button--end	The ending scroll button.
scroll-button__base	The scroll button's exported `base` part.

Slots
name	description
	Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
nav	Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.

Events
name	type	description	reactName	eventName
sl-tab-show	{ "text": "{ name: String }" }	Emitted when a tab is shown.	onSlTabShow	SlTabShowEvent
sl-tab-hide	{ "text": "{ name: String }" }	Emitted when a tab is hidden.	onSlTabHide	SlTabHideEvent

Methods

name

parameters

description

updateScrollControls

syncIndicator

show

parameters
name	type
panel	{ "text": "string" }

Shows the specified tab panel.

sl-tab-panel

Properties
name	type	default	description	attribute	reflects
name	{ "text": "string" }	''	The tab panel's name.	name	true
active	{ "text": "boolean" }	false	When true, the tab panel will be shown.	active	true

Attributes
name	type	default	description	fieldName
name	{ "text": "string" }	''	The tab panel's name.	name
active	{ "text": "boolean" }	false	When true, the tab panel will be shown.	active

CSS Properties
name	description
--padding	The tab panel's padding.

CSS Parts
name	description
base	The component's base wrapper.

Slots
name	description
	The tab panel's content.

Methods
name
handleActiveChange

sl-switch

Properties
name	type	description	default	attribute	reflects	readonly
input	{ "text": "HTMLInputElement" }	-	-	-	-	-
title	{ "text": "string" }	-	''	title	-	-
name	{ "text": "string" }	The name of the switch, submitted as a name/value pair with form data.	''	name	-	-
value	{ "text": "string" }	The current value of the switch, submitted as a name/value pair with form data.	-	value	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	The switch's size.	'medium'	size	true	-
disabled	{ "text": "boolean" }	Disables the switch.	false	disabled	true	-
checked	{ "text": "boolean" }	Draws the switch in a checked state.	false	checked	true	-
defaultChecked	{ "text": "boolean" }	The default value of the form control. Primarily used for resetting the form control.	false	-	-	-
form	{ "text": "string" }	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	''	form	true	-
required	{ "text": "boolean" }	Makes the switch a required field.	false	required	true	-
helpText	{ "text": "string" }	The switch's help text. If you need to display HTML, use the `help-text` slot instead.	''	help-text	-	-
validity	-	Gets the validity state object	-	-	-	true
validationMessage	-	Gets the validation message	-	-	-	true

Attributes
name	type	fieldName	default	description
title	{ "text": "string" }	title	''	-
name	{ "text": "string" }	name	''	The name of the switch, submitted as a name/value pair with form data.
value	{ "text": "string" }	value	-	The current value of the switch, submitted as a name/value pair with form data.
size	{ "text": "'small' \| 'medium' \| 'large'" }	size	'medium'	The switch's size.
disabled	{ "text": "boolean" }	disabled	false	Disables the switch.
checked	{ "text": "boolean" }	checked	false	Draws the switch in a checked state.
form	{ "text": "string" }	form	''	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
required	{ "text": "boolean" }	required	false	Makes the switch a required field.
help-text	{ "text": "string" }	helpText	''	The switch's help text. If you need to display HTML, use the `help-text` slot instead.

CSS Properties
name	description
--width	The width of the switch.
--height	The height of the switch.
--thumb-size	The size of the thumb.

CSS Parts
name	description
base	The component's base wrapper.
control	The control that houses the switch's thumb.
thumb	The switch's thumb.
label	The switch's label.
form-control-help-text	The help text's wrapper.

Slots
name	description
	The switch's label.
help-text	Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.

Events
name	description	reactName	eventName
sl-blur	Emitted when the control loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when the control's checked state changes.	onSlChange	SlChangeEvent
sl-input	Emitted when the control receives input.	onSlInput	SlInputEvent
sl-focus	Emitted when the control gains focus.	onSlFocus	SlFocusEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleCheckedChange

handleDisabledChange

click

Simulates a click on the switch.

focus

Sets focus on the switch.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the switch.

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	type
message	{ "text": "string" }

sl-tag

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon-button': SlIconButton }	-	-	-	true
variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger' \| 'text'" }	'neutral'	The tag's theme variant.	variant	true	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	The tag's size.	size	true	-
pill	{ "text": "boolean" }	false	Draws a pill-style tag with rounded edges.	pill	true	-
removable	{ "text": "boolean" }	false	Makes the tag removable and shows a remove button.	removable	-	-

Attributes
name	type	default	description	fieldName
variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger' \| 'text'" }	'neutral'	The tag's theme variant.	variant
size	{ "text": "'small' \| 'medium' \| 'large'" }	'medium'	The tag's size.	size
pill	{ "text": "boolean" }	false	Draws a pill-style tag with rounded edges.	pill
removable	{ "text": "boolean" }	false	Makes the tag removable and shows a remove button.	removable

CSS Parts
name	description
base	The component's base wrapper.
content	The tag's content.
remove-button	The tag's remove button, an `<sl-icon-button>`.
remove-button__base	The remove button's exported `base` part.

Slots
name	description
	The tag's content.

Events
name	description	reactName	eventName
sl-remove	Emitted when the remove button is activated.	onSlRemove	SlRemoveEvent

sl-textarea

Properties
name	type	description	attribute	default	reflects	readonly
input	{ "text": "HTMLTextAreaElement" }	-	-	-	-	-
title	{ "text": "string" }	-	title	''	-	-
name	{ "text": "string" }	The name of the textarea, submitted as a name/value pair with form data.	name	''	-	-
value	{ "text": "string" }	The current value of the textarea, submitted as a name/value pair with form data.	value	''	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	The textarea's size.	size	'medium'	true	-
filled	{ "text": "boolean" }	Draws a filled textarea.	filled	false	true	-
label	{ "text": "string" }	The textarea's label. If you need to display HTML, use the `label` slot instead.	label	''	-	-
helpText	{ "text": "string" }	The textarea's help text. If you need to display HTML, use the `help-text` slot instead.	help-text	''	-	-
placeholder	{ "text": "string" }	Placeholder text to show as a hint when the input is empty.	placeholder	''	-	-
rows	{ "text": "number" }	The number of rows to display by default.	rows	4	-	-
resize	{ "text": "'none' \| 'vertical' \| 'auto'" }	Controls how the textarea can be resized.	resize	'vertical'	-	-
disabled	{ "text": "boolean" }	Disables the textarea.	disabled	false	true	-
readonly	{ "text": "boolean" }	Makes the textarea readonly.	readonly	false	true	-
form	{ "text": "string" }	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	form	''	true	-
required	{ "text": "boolean" }	Makes the textarea a required field.	required	false	true	-
minlength	{ "text": "number" }	The minimum length of input that will be considered valid.	minlength	-	-	-
maxlength	{ "text": "number" }	The maximum length of input that will be considered valid.	maxlength	-	-	-
autocapitalize	{ "text": "'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'" }	Controls whether and how text input is automatically capitalized as it is entered by the user.	autocapitalize	-	-	-
autocorrect	{ "text": "string" }	Indicates whether the browser's autocorrect feature is on or off.	autocorrect	-	-	-
autocomplete	{ "text": "string" }	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.	autocomplete	-	-	-
autofocus	{ "text": "boolean" }	Indicates that the input should receive focus on page load.	autofocus	-	-	-
enterkeyhint	{ "text": "'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'" }	Used to customize the label or icon of the Enter key on virtual keyboards.	enterkeyhint	-	-	-
spellcheck	{ "text": "boolean" }	Enables spell checking on the textarea.	spellcheck	true	-	-
inputmode	{ "text": "'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'" }	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.	inputmode	-	-	-
defaultValue	{ "text": "string" }	The default value of the form control. Primarily used for resetting the form control.	-	''	-	-
validity	-	Gets the validity state object	-	-	-	true
validationMessage	-	Gets the validation message	-	-	-	true

Attributes
name	type	fieldName	description	default
title	{ "text": "string" }	title	-	''
name	{ "text": "string" }	name	The name of the textarea, submitted as a name/value pair with form data.	''
value	{ "text": "string" }	value	The current value of the textarea, submitted as a name/value pair with form data.	''
size	{ "text": "'small' \| 'medium' \| 'large'" }	size	The textarea's size.	'medium'
filled	{ "text": "boolean" }	filled	Draws a filled textarea.	false
label	{ "text": "string" }	label	The textarea's label. If you need to display HTML, use the `label` slot instead.	''
help-text	{ "text": "string" }	helpText	The textarea's help text. If you need to display HTML, use the `help-text` slot instead.	''
placeholder	{ "text": "string" }	placeholder	Placeholder text to show as a hint when the input is empty.	''
rows	{ "text": "number" }	rows	The number of rows to display by default.	4
resize	{ "text": "'none' \| 'vertical' \| 'auto'" }	resize	Controls how the textarea can be resized.	'vertical'
disabled	{ "text": "boolean" }	disabled	Disables the textarea.	false
readonly	{ "text": "boolean" }	readonly	Makes the textarea readonly.	false
form	{ "text": "string" }	form	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	''
required	{ "text": "boolean" }	required	Makes the textarea a required field.	false
minlength	{ "text": "number" }	minlength	The minimum length of input that will be considered valid.	-
maxlength	{ "text": "number" }	maxlength	The maximum length of input that will be considered valid.	-
autocapitalize	{ "text": "'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'" }	autocapitalize	Controls whether and how text input is automatically capitalized as it is entered by the user.	-
autocorrect	{ "text": "string" }	autocorrect	Indicates whether the browser's autocorrect feature is on or off.	-
autocomplete	{ "text": "string" }	autocomplete	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.	-
autofocus	{ "text": "boolean" }	autofocus	Indicates that the input should receive focus on page load.	-
enterkeyhint	{ "text": "'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'" }	enterkeyhint	Used to customize the label or icon of the Enter key on virtual keyboards.	-
spellcheck	{ "text": "boolean" }	spellcheck	Enables spell checking on the textarea.	true
inputmode	{ "text": "'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'" }	inputmode	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.	-

CSS Parts
name	description
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The input's wrapper.
form-control-help-text	The help text's wrapper.
base	The component's base wrapper.
textarea	The internal `<textarea>` control.

Slots
name	description
label	The textarea's label. Alternatively, you can use the `label` attribute.
help-text	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Events
name	description	reactName	eventName
sl-blur	Emitted when the control loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when an alteration to the control's value is committed by the user.	onSlChange	SlChangeEvent
sl-focus	Emitted when the control gains focus.	onSlFocus	SlFocusEvent
sl-input	Emitted when the control receives input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

Methods

name

description

parameters

return

handleDisabledChange

handleRowsChange

handleValueChange

focus

Sets focus on the textarea.

parameters
name	optional	type
options	true	{ "text": "FocusOptions" }

blur

Removes focus from the textarea.

select

Selects all the text in the textarea.

scrollPosition

Gets or sets the textarea's scroll position.

parameters
name	optional	type
position	true	{ "text": "{ top?: number; left?: number }" }

{ "type": { "text": "{ top: number; left: number } | undefined" } }

setSelectionRange

Sets the start and end positions of the text selection (0-based).

parameters
name	type	default
selectionStart	{ "text": "number" }	-
selectionEnd	{ "text": "number" }	-
selectionDirection	{ "text": "'forward' \| 'backward' \| 'none'" }	'none'

setRangeText

Replaces a range of text with a new string.

parameters
name	type	optional	default
replacement	{ "text": "string" }	-	-
start	{ "text": "number" }	true	-
end	{ "text": "number" }	true	-
selectMode	{ "text": "'select' \| 'start' \| 'end' \| 'preserve'" }	-	'preserve'

checkValidity

Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.

getForm

Gets the associated form, if one exists.

{ "type": { "text": "HTMLFormElement | null" } }

reportValidity

Checks for validity and shows the browser's validation message if the control is invalid.

setCustomValidity

Sets a custom validation message. Pass an empty string to restore validity.

parameters
name	type
message	{ "text": "string" }

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-popup': SlPopup }	-	-	-	true
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-
body	{ "text": "HTMLElement" }	-	-	-	-	-
popup	{ "text": "SlPopup" }	-	-	-	-	-
content	{ "text": "string" }	''	The tooltip's content. If you need to display HTML, use the `content` slot instead.	content	-	-
placement	{ "text": "\| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'" }	'top'	The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.	placement	-	-
disabled	{ "text": "boolean" }	false	Disables the tooltip so it won't show when triggered.	disabled	true	-
distance	{ "text": "number" }	8	The distance in pixels from which to offset the tooltip away from its target.	distance	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.	open	true	-
skidding	{ "text": "number" }	0	The distance in pixels from which to offset the tooltip along its target.	skidding	-	-
trigger	{ "text": "string" }	'hover focus'	Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.	trigger	-	-
hoist	{ "text": "boolean" }	false	Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto\|hidden\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist	-	-

Attributes
name	type	default	description	fieldName
content	{ "text": "string" }	''	The tooltip's content. If you need to display HTML, use the `content` slot instead.	content
placement	{ "text": "\| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'" }	'top'	The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.	placement
disabled	{ "text": "boolean" }	false	Disables the tooltip so it won't show when triggered.	disabled
distance	{ "text": "number" }	8	The distance in pixels from which to offset the tooltip away from its target.	distance
open	{ "text": "boolean" }	false	Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.	open
skidding	{ "text": "number" }	0	The distance in pixels from which to offset the tooltip along its target.	skidding
trigger	{ "text": "string" }	'hover focus'	Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.	trigger
hoist	{ "text": "boolean" }	false	Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto\|hidden\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist

CSS Properties
name	description
--max-width	The maximum width of the tooltip before its content will wrap.
--hide-delay	The amount of time to wait before hiding the tooltip when hovering.
--show-delay	The amount of time to wait before showing the tooltip when hovering.

CSS Parts
name	description
base	The component's base wrapper, an `<sl-popup>` element.
base__popup	The popup's exported `popup` part. Use this to target the tooltip's popup container.
base__arrow	The popup's exported `arrow` part. Use this to target the tooltip's arrow.
body	The tooltip's body where its content is rendered.

Slots
name	description
	The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
content	The content to render in the tooltip. Alternatively, you can use the `content` attribute.

Events
name	description	reactName	eventName
sl-show	Emitted when the tooltip begins to show.	onSlShow	SlShowEvent
sl-after-show	Emitted after the tooltip has shown and all animations are complete.	onSlAfterShow	SlAfterShowEvent
sl-hide	Emitted when the tooltip begins to hide.	onSlHide	SlHideEvent
sl-after-hide	Emitted after the tooltip has hidden and all animations are complete.	onSlAfterHide	SlAfterHideEvent

Methods
name	description
handleOpenChange	-
handleOptionsChange	-
handleDisabledChange	-
show	Shows the tooltip.
hide	Hides the tooltip

sl-tree

Properties
name	type	default	description	attribute
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-
expandedIconSlot	{ "text": "HTMLSlotElement" }	-	-	-
collapsedIconSlot	{ "text": "HTMLSlotElement" }	-	-	-
selection	{ "text": "'single' \| 'multiple' \| 'leaf'" }	'single'	The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.	selection

Attributes
name	type	default	description	fieldName
selection	{ "text": "'single' \| 'multiple' \| 'leaf'" }	'single'	The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.	selection

CSS Properties
name	description	default
--indent-size	The size of the indentation for nested items.	var(--sl-spacing-medium)
--indent-guide-color	The color of the indentation line.	var(--sl-color-neutral-200)
--indent-guide-offset	The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position.	0
--indent-guide-style	The style of the indentation line, e.g. solid, dotted, dashed.	solid
--indent-guide-width	The width of the indentation line.	0

CSS Parts
name	description
base	The component's base wrapper.

Slots
name	description
	The default slot.
expand-icon	The icon to show when the tree item is expanded. Works best with `<sl-icon>`.
collapse-icon	The icon to show when the tree item is collapsed. Works best with `<sl-icon>`.

Events
name	type	description	reactName	eventName
sl-selection-change	{ "text": "{ selection: SlTreeItem[] }" }	Emitted when a tree item is selected or deselected.	onSlSelectionChange	SlSelectionChangeEvent

Methods

name

parameters

handleMouseDown

parameters
name	type
event	{ "text": "MouseEvent" }

handleSelectionChange

sl-tree-item

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-checkbox': SlCheckbox, 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }	-	-	-	true
indeterminate	{ "text": "boolean" }	false	-	-	-	-
isLeaf	{ "text": "boolean" }	false	-	-	-	-
loading	{ "text": "boolean" }	false	-	-	-	-
selectable	{ "text": "boolean" }	false	-	-	-	-
expanded	{ "text": "boolean" }	false	Expands the tree item.	expanded	true	-
selected	{ "text": "boolean" }	false	Draws the tree item in a selected state.	selected	true	-
disabled	{ "text": "boolean" }	false	Disables the tree item.	disabled	true	-
lazy	{ "text": "boolean" }	false	Enables lazy loading behavior.	lazy	true	-
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-
childrenSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-
itemElement	{ "text": "HTMLDivElement" }	-	-	-	-	-
childrenContainer	{ "text": "HTMLDivElement" }	-	-	-	-	-
expandButtonSlot	{ "text": "HTMLSlotElement" }	-	-	-	-	-

Attributes
name	type	default	description	fieldName
expanded	{ "text": "boolean" }	false	Expands the tree item.	expanded
selected	{ "text": "boolean" }	false	Draws the tree item in a selected state.	selected
disabled	{ "text": "boolean" }	false	Disables the tree item.	disabled
lazy	{ "text": "boolean" }	false	Enables lazy loading behavior.	lazy

CSS Parts
name	description
base	The component's base wrapper.
item	The tree item's container. This element wraps everything except slotted tree item children.
item--disabled	Applied when the tree item is disabled.
item--expanded	Applied when the tree item is expanded.
item--indeterminate	Applied when the selection is indeterminate.
item--selected	Applied when the tree item is selected.
indentation	The tree item's indentation container.
expand-button	The container that wraps the tree item's expand button and spinner.
spinner	The spinner that shows when a lazy tree item is in the loading state.
spinner__base	The spinner's base part.
label	The tree item's label.
children	The container that wraps the tree item's nested children.
checkbox	The checkbox that shows when using multiselect.
checkbox__base	The checkbox's exported `base` part.
checkbox__control	The checkbox's exported `control` part.
checkbox__control--checked	The checkbox's exported `control--checked` part.
checkbox__control--indeterminate	The checkbox's exported `control--indeterminate` part.
checkbox__checked-icon	The checkbox's exported `checked-icon` part.
checkbox__indeterminate-icon	The checkbox's exported `indeterminate-icon` part.
checkbox__label	The checkbox's exported `label` part.

Slots
name	description
	The default slot.
expand-icon	The icon to show when the tree item is expanded.
collapse-icon	The icon to show when the tree item is collapsed.

Events
name	description	reactName	eventName
sl-expand	Emitted when the tree item expands.	onSlExpand	SlExpandEvent
sl-after-expand	Emitted after the tree item expands and all animations are complete.	onSlAfterExpand	SlAfterExpandEvent
sl-collapse	Emitted when the tree item collapses.	onSlCollapse	SlCollapseEvent
sl-after-collapse	Emitted after the tree item collapses and all animations are complete.	onSlAfterCollapse	SlAfterCollapseEvent
sl-lazy-change	Emitted when the tree item's lazy state changes.	onSlLazyChange	SlLazyChangeEvent
sl-lazy-load	Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.	onSlLazyLoad	SlLazyLoadEvent

Methods

name

parameters

static

return

description

isTreeItem

parameters
name	type
node	{ "text": "Node" }

true

handleLoadingChange

handleDisabledChange

handleSelectedChange

handleExpandedChange

handleExpandAnimation

handleLazyChange

getChildrenItems

parameters
name	default	type
{ includeDisabled = true }	{}	{ "text": "{ includeDisabled?: boolean }" }

{ "type": { "text": "SlTreeItem[]" } }

Gets all the nested tree items in this node.

Slots
name	description
	The content to be visually hidden.

sl-alert

sl-avatar

sl-breadcrumb

sl-breadcrumb-item

sl-badge

sl-animation

sl-button

sl-animated-image

sl-button-group

sl-card

sl-carousel

sl-carousel-item

sl-checkbox

sl-color-picker

sl-copy-button

sl-details

sl-dialog

sl-divider

sl-drawer

sl-dropdown

sl-format-bytes

sl-format-date

sl-format-number

sl-icon

sl-icon-button

sl-image-comparer

sl-include

sl-input

sl-menu

sl-menu-item

sl-menu-label

sl-mutation-observer

sl-option

sl-popup

sl-progress-bar

sl-progress-ring

sl-radio

sl-qr-code

sl-radio-button

sl-radio-group

sl-range

sl-rating

sl-relative-time

sl-resize-observer

sl-select

sl-skeleton

sl-spinner

sl-split-panel

sl-tab

sl-tab-group

sl-tab-panel

sl-switch

sl-tag

sl-textarea

sl-tooltip

sl-tree

sl-tree-item

sl-visually-hidden