Switch

The <bolt-switch> custom element must include one of these three parameters (required):

• label: The label text for the input. This generates a visible <label> element associated with the underlying <input> element.
• arialabel: Sets the aria-label attribute of the underlying <input> element.
• arialabelledby: Sets the aria-labelledby attribute of the underlying <input> element.

Additionally, The <bolt-switch> element supports the following parameters:

• checked (optional)
  • If present, the field is checked.
• datatestinput (optional)
  • Optional property to configure the [data-test] value on the underlying <input> element.
  • default: "input"
• disabled (optional)
  • If present, disables rendered interactive elements.
• error (optional)
  • The error message to display below the input.
  • Should not be used when component is disabled.
  • For slotted field error see switch with error slot
• instructionaltext (optional)
  • The instructional text to display below the input.
  • This should be used to inform users about Switch effects.
• invalid (optional)
  • If present, renders underlying input semantically invalid to screen readers.
• optionaltext (optional)
  • show (default) or hide. Use to remove the "(optional)" text from non-required fields.
• required (optional)
  • If present, the field is required. Fields that are not required will show "(optional)".
• value (optional)
  • The value for the input, which must be a string. The value attribute will not accept an object.

• blur
• change: fires when toggled
• focus
• input: fires when toggled

• [data-test="input"] targets the primary <input> element.
  • Configurable via the datatestinput property.

• Switches allow users to make a single binary decision (yes/no, on/off etc.) with an immediate effect.
• There is no indeterminate state of a Switch, it must be set to either selected (on) or unselected (off)
• A Switch should always a have label or surrounding context.

• When a user can make a binary decision AND the input can be recorded or updated immediately.

• Avoid if a submit Button is needed to apply or save a selection.
• Avoid if there are more than two available choices.
• Avoid if the choices are not binary. (Example: Would you like chocolate or no ice cream?)

• Consider Checkbox when there are more than 2 related options, multiple items can be selected AND the result needs saving or submitted.
• Consider Radio button or Select when there are more than 2 related options, only a single item can be selected AND the result needs saving or submitted.
• Consider Radio button for a set of options requiring a single choice that is not binary or has unequal states.
• If users need to confirm a statement, consider a Checkbox.

• Labels should be in sentence case with no ending punctuation; aim for six words or fewer.
• If a label is more than six words, consider adding necessary context in Contextual Help or instructional text outside the Switch label.
• Avoid using complex questions and long text.

• Spacebar key toggles the switch state between on and off.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.