Switch

The Switch component is used as an alternative for the Checkbox component, switch between enabled or disabled states.

Switch must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.

Import

import { Switch } from '@sajari-ui/core';

import { Switch } from '@sajari-ui/core';

Enable something

<Switch defaultChecked>Enable something</Switch>

<Switch defaultChecked>Enable something</Switch>

Enable something

<Switch defaultChecked disabled>
  Enable something
</Switch>

<Switch defaultChecked disabled>
  Enable something
</Switch>

Enable something

<Switch defaultChecked invalid>
  Enable something
</Switch>

<Switch defaultChecked invalid>
  Enable something
</Switch>

Name	Type	Description
`id`	`string`	The id of the switch for associated with a label.
`name`	`string`	The input name of the switch when used in a form.
`value`	`string`, `boolean`	The value of the switch.
`children`	`React.ReactNode`	The children of the switch.
`aria-label`	`string`	The aria-label of the switch for accessibility.
`aria-labelledby`	`string`	The aria-labelledby of the switch for accessibility.
`checked`	`boolean`	If `true`, set the switch to the checked state.
`defaultChecked`	`boolean`	If `true`, the checkbox will be initially checked.
`disabled`	`boolean`	If `true`, set the disabled to the invalid state.
`invalid`	`boolean`	If `true`, set the switch to the invalid state.