Switch

A switch is used to quickly switch between two possible states.

Switch is a control that is used to quickly switch between two possible states. Switches are only used for these binary actions that occur immediately after the user “flips the switch.” They are commonly used for “on/off” switches.

Anatomy

Structure

<Switch> <IconList /> /* (Optional) A list of icons in the switch */ <Icon /> /* (Optional) An icon in the switch */ <Text /> /* (Optional) Text in the switch */ </Switch>

Composed Components

A Switch uses the following components:

Usage

Selected

A switch can be selected.

No label

A switch can be rendered without a label.

Disabled

A switch can be disabled.

Disabled Field

A switch field can be disabled.

Sizes

A switch can vary in size.

Field Sizes

A switch field can vary in size.

Icon

A switch can be rendered with an icon or an icon list.

Best Practices

Switches should:

  • Have an immediate, visible effect when they are flipped on or off.
  • Only offer an active or inactive state.
  • Always be accompanied by a clear label.
  • Offer choices that are mutually exclusive to one another.

Checkbox vs. Switch

Checkbox and Switch components are very similar in term of results when used in a form. However, a few details tell them apart.

  • Checkbox component can offer multiple options to the user, while the Switch only offers one.
  • Users can select none to any option with checkboxes, while the Switch always have one active selection at all time (either “on” or “off” position)
  • Choices offered in checkbox grouping are independant from each other, while the Switch's mutually exclusive.
  • The Switch's selection takes effect immediately, while the checkbox only happens once the user applied the change.

Props

Switch

size?

A Switch can vary in size.

Defaults to md.
style?

The inline style for the element. A function may be provided to compute the style based on component state.

children?

The children of the component. A function may be provided to alter the children based on component state.

defaultSelected?

Whether the Switch should be selected (uncontrolled).

isSelected?

Whether the Switch should be selected (controlled).

value?

The value of the input element, used when submitting an HTML form. See MDN.

isDisabled?

Whether the input is disabled.

isReadOnly?

Whether the input can be selected but not changed by the user.

autoFocus?

Whether the element should receive focus on render.

name?

The name of the input element, used when submitting an HTML form. See MDN.

inputRef?

A ref for the HTML input element.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

SwitchField

description?

The description of the switch field.

isDisabled?

Whether the switch field is disabled.

size?

A switch field can vary in size.

Defaults to md.
children?

The children of the component. A function may be provided to alter the children based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

style?

The inline style for the element. A function may be provided to compute the style based on component state.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • onChange signature has been changed – no events are passed.
  • onValueChange has been deleted, use onChange instead.
  • checked has been renamed to isSelected.
  • disabled has been renamed to isDisabled.
  • The Counter component is no longer allowed as a specialized slot.
  • reverse is not supported, use flex-direction or row-reverse instead.
  • validationState has been removed. A Switch cannot be invalid.