Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Switch

Guidance Code Accessibility

Component demo

Interactive example

Web component React
StackBlitz
Show full code 
<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>

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

Iftrue , the switch will display as checked.

type: boolean - boolean | undefined
false
Property disabled
Attribute disabled

Iftrue , the disabled state will be set.

type: boolean - boolean | undefined
false
Property helperText
Attribute helper-text

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

type: string - string | undefined
""
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 - boolean | undefined
false
Property name
Attribute name

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

type: string - string | undefined
this.inputId
Property size
Attribute size

The size of the switch component.

type: IcSizesNoLarge - "medium" | "small" | undefined
"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" | undefined
"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 - null | string | undefined
"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 - boolean | undefined
Default: false
Property disabled
Attribute disabled

Iftrue , the disabled state will be set.

type: boolean - boolean | undefined
Default: false
Property helperText
Attribute helper-text

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

type: string - string | undefined
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 - boolean | undefined
Default: false
Property name
Attribute name

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

type: string - string | undefined
Default: this.inputId
Property size
Attribute size

The size of the switch component.

type: IcSizesNoLarge - "medium" | "small" | undefined
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" | undefined
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 - null | string | undefined
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.

Read more about slots .


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

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

Small

Interactive example

Web component React
StackBlitz
Show full code 
<ic-switch
label="Coffee preferences"
size="small"
></ic-switch>

Disabled

Interactive example

Web component React
StackBlitz
Show full code 
<ic-switch
label="Coffee preferences"
disabled="true"
></ic-switch>
<ic-switch
label="Coffee preferences"
disabled="true"
checked="true"
></ic-switch>

Helper text and right adornment

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Theme

Interactive example

Web component React
StackBlitz
Show full code 
<ic-switchlabel="Coffee preferences"theme="dark"></ic-switch>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Switch - Intelligence Community Design System