Switch

Switch lets users select a value from a number of options.

Overview

MonthYearWeekDayDate RangeDayDate RangeMobile (Select Component)DesktopThe Switch component.

Usage

With regards to behaviour, a switch can be thought of like a radio field, allowing a single choice from a small number of options. The difference between a switch and radio is presentation - a switch looks similar to a button group. Try to limit the number of items that appear in the Switch. This prevents the Switch breaking on smaller screens and doesn't overwhelm the user with the number of options available. If you require the user to pick an item from a number of options, the Select Component may be a better approach.

Anatomy

Container1Label (optional)4MonthYearWeekDayDate RangeAnatomy of the Switch component.Selected Item2Unselected Item3
  1. Container. This wraps the Switch component. On Mobile, this transforms into a Select component, changing the visual appearance of the side-by-side options.
  2. Selected Item. The Selected value has a blue border around it to signify to the user the selected option.
  3. Unselected Item. This is the default look of the Switch item.
  4. Label (Optional). A label can be provided to describe the function of the Switch component.

States

WeekWeekUnselectedSelectedThe Switch states.

The Switch component acts the same as a group of Radio Buttons. Each Switch Item has its own state, however making a single Switch Item active will automatically deselect the rest of the Items.

Hierarchy & Placement

The Switch component can be used wherever a Radio selection is needed. It can be used within a form, or as a standalone component (For example, changing the view of a calendar between Day/Week/Month/Year).

Basic Usage

Date Range
const options = [
  { label: 'Day', value: '1' },
  { label: 'Week', value: '2' },
  { label: 'Month', value: '3' },
  { label: 'Year', value: '4' },
]

<Switch
  name="example-switch-field"
  value=""
  label="Date Range"
  options={options}
  onChange={(previous, active) => {
    console.log(previous, active)
  }}
/>

Switch Properties

NameTypeRequiredDefaultDescription
labelstringFalsen/aThe label to display at the top of the component
namestringFalsen/aThe name attribute assigned to the form input
valuestringFalsen/aThe current active value associated with field
optionsOptionType[]Truen/aThe option values that can be selected from
onChange(previous: Option, active: Option):voidFalsen/aA callback function, invoked when an option is selected
sizestringFalseregularSpecify the size of the component (small, regular, large)