Switch

BETA

Component demo

Interactive example

Coffee preferences

Web component

React

<ic-switchlabel="Coffee preferences"></ic-switch>
<script>
  const switchEl = document.querySelector('ic-switch');
  switchEl.addEventListener('icChange', (ev) => {
    console.log({
      checked: ev.detail.checked,
      value: ev.detail.value
    })
  })
</script>

<IcSwitch
label="Coffee preferences"
onIcChange={(ev)=>console.log({
    checked: ev.detail.checked,
    value: ev.detail.value
})}
/>

Switch details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The aria-label applied to the switch when no visual 'name' is provided. Required type: string
Property checked Attribute checked	If`true` , the switch will display as checked. type: boolean	false
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. type: string	""
Property hideLabel Attribute hide-label	If`true` , the label will be hidden and the required label value will be applied as an aria-label. type: boolean	false
Property name Attribute name	The name of the control, which is submitted with the form data. type: string	this.inputId
Property showState Attribute show-state	If`true` , the switch will render the On/Off state text. type: boolean	false
Property size Attribute size	The size of the switch component. type: IcSizesNoLarge - "medium" \| "small"	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"
Property value Attribute value	The value of the toggle does not mean if it's checked or not, use the`checked` property for that. The value of a toggle is analogous to the value of a`<input type="checkbox">` , it's only used when the toggle participates in a native`<form>` . type: string \| null - string	"on"

Property

label

Attribute

label

The aria-label applied to the switch when no visual 'name' is provided.

Required

type: string

Property

checked

Attribute

checked

Iftrue , the switch will display as checked.

type: boolean

Default: false

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean

Default: false

Property

helperText

Attribute

helper-text

The helper text that will be displayed for additional field guidance.

type: string

Default: ""

Property

hideLabel

Attribute

hide-label

Iftrue , the label will be hidden and the required label value will be applied as an aria-label.

type: boolean

Default: false

Property

name

Attribute

name

The name of the control, which is submitted with the form data.

type: string

Default: this.inputId

Property

showState

Attribute

show-state

Iftrue , the switch will render the On/Off state text.

type: boolean

Default: false

Property

size

Attribute

size

The size of the switch component.

type: IcSizesNoLarge - "medium" | "small"

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Property

value

Attribute

value

The value of the toggle does not mean if it's checked or not, use thechecked property for that. The value of a toggle is analogous to the value of a<input type="checkbox"> , it's only used when the toggle participates in a native<form> .

type: string | null - string

Default: "on"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot right-adornment	Content is placed to the right of switch before state label.

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icBlur React onIcBlur	Emitted when the toggle loses focus.	void
Web component icChange React onIcChange	Emitted when the value property has changed.	IcSwitchChangeEventDetail
Web component icFocus React onIcFocus	Emitted when the toggle has focus.	void

Web component

icBlur

React

onIcBlur

Emitted when the toggle loses focus.

void

Web component

icChange

React

onIcChange

Emitted when the value property has changed.

IcSwitchChangeEventDetail

Web component

icFocus

React

onIcFocus

Emitted when the toggle has focus.

void

Methods

Name	Description	Signature
Method setFocus	Sets focus on the switch.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the switch.

setFocus() => Promise<void>

Variants

State

Interactive example

Coffee preferences

Web component

React

<ic-switchlabel="Coffee preferences"show-state="true"></ic-switch>

<IcSwitchlabel="Coffee preferences"showState/>

Small

Interactive example

Coffee preferences

Web component

React

<ic-switch
label="Coffee preferences"
show-state="true"
size="small"
></ic-switch>

<IcSwitchlabel="Coffee preferences"showStatesize="small"/>

Disabled

Interactive example

Coffee preferences

Web component

React

<ic-switch
label="Coffee preferences"
show-state="true"
disabled="true"
></ic-switch>
<ic-switch
label="Coffee preferences"
show-state="true"
disabled="true"
checked="true"
></ic-switch>

<IcSwitchlabel="Coffee preferences"showStatedisabled/>
<IcSwitchlabel="Coffee preferences"showStatedisabledchecked/>

Helper text and right adornment

Interactive example

Coffee preferences

Choose your coffee preferences

Web component

React

<ic-switchlabel="Coffee preferences"helper-text="Choose your coffee preferences">
<svg
slot="right-adornment"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</svg>
</ic-switch>

<IcSwitchlabel="Coffee preferences"helperText="Choose your coffee preferences">
<SlottedSVG
slot="right-adornment"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</SlottedSVG>
</IcSwitch>

Theme

Interactive example

Coffee preferences

Web component

React

<ic-switchlabel="Coffee preferences"theme="dark"></ic-switch>

<IcSwitch
label="Coffee preferences"
theme="dark"
/>

Last reviewed 31 May 2024 .