Switch

The Switch component is used to toggle between enabled or disabled states.

Use toggles when you intend to turn something on or off. For example, if you need to enable a feature flag. If a physical switch would work for the action, a toggle is probably the best component to use.

Import

import { Switch } from '@outfitio/outkit';

Usage

Sizes

Pass the size prop to change the size of the switch.

Accessibility

• Use the disabled prop to apply the HTML disabled attribute to the switch. This prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies.
• In the event there is no visible label for the switch - for example, within the context of a table column - use the aria-label prop to provide a label for assistive technologies. Alternatively, use aria-labelledby to point to an alternate label.

Best Practice

• Switch labels should correspond to the positive or active state of the setting. For example Turn on notifications instead of Turn off notifications.
• Use sentence case for switch labels, where the first word is capitalised and the rest are lowercase, unless the term is a proper noun

Props