#Switch

#Import

import { Switch } from '@dnb/eufemia'

#Description

Also known as a toggle switch or toggle.

The Switch component (toggle) is a digital on/off switch. Toggle switches are best used for changing system functionalities and preferences. "Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states." – Source

You may also check out the Checkbox component.

#When to use Switch vs Eufemia Forms

Classic form components like this one are presentational controls. They handle the styling, sizing, icons, and basic events, while you manage their value, validation, and error handling yourself.

For most data input and forms situations, use Eufemia Forms fields instead. They build on these same components, but add data handling, validation, and error messages through the surrounding Form.Handler. Browse the field components to find the one that matches your data.

Reach for a classic component when you need it standalone outside of a form context, or when you handle the value and validation yourself.

The Eufemia Forms equivalent of Switch is Field.Boolean with the switch variant (variant="switch"), or Field.Toggle for toggling between two values.

#Relevant links

• Figma
• Source code
• Docs code

#Accessibility

The Switch component uses a semantic checkbox input with role="switch" to properly communicate its toggle functionality. It is keyboard accessible (Space to toggle) and announces its current state to screen readers.

#How it should work

"Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state. As always, we should strive to match the system to the real world." – Source

#When not to use

Do not use a toggle switch if the user is required to click Save or Update to apply the new state.

#Good practices

"The toggle labels should describe what the control will do when the switch is on; they should not be neutral or ambiguous. When in doubt, say the label aloud and append 'on/off' to the end. If it doesn't make sense, then rewrite the label." – Source

The label should describe what the toggle will do when the switch is on.

#Related components

Switch is part of the Input category. Other components for similar needs:

• Autocomplete — to help people find and choose from matching suggestions as they type.
• Checkbox — when people can turn one or more options on or off.
• DatePicker — when people need to choose one date or a date range.
• Dropdown — when people need to choose one option from a list.
• Filter — to help people narrow down a list or data set.
• FormLabel — to name an input, control, or form-related field.

See all in Input →

#Demos

#Unchecked Switch

<Switch label="Switch" onChange={console.log} />

#Checked Switch

<Switch
  label="Label"
  labelPosition="left"
  checked
  onChange={({ checked }) => console.log(checked)}
/>

#Checked Switch with error message

<Switch label="Switch" checked status="Error message" />

#Switch with suffix

<Switch
  label="Switch"
  checked
  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>

#Switch in different sizes

As for now, there are two sizes. medium is the default size.

<Switch size="medium" label="Medium" right="large" checked />
<Switch size="large" label="Large" right="large" checked />
<Switch size="large" label="Large" />

#Switch in disabled state

<Switch checked disabled label="Disabled" />