Switch

This component toggles the state of a single item from on to off or from one criteria to another.

Basic Usage


import { Switch, SwitchInput, SwitchLabel } from '@krakentech/coral';
 
<Switch>
    <Stack alignItems="center">
        <SwitchInput />
        <SwitchLabel label="Switch" />
    </Stack>
</Switch>

Switch

Properties

checked


const [isChecked, setIsChecked] = useState(true);
const onChange = (e: any) => {
    setIsChecked(e.target.checked);
};
 
<Switch checked={isChecked} onChange={onChange}>
    <SwitchInput />
</Switch>
<Button size="small" onClick={() => setIsChecked(!isChecked)}>
    {isChecked ? 'Uncheck' : 'Check'}
</Button>

disabled


<Switch disabled>
    <Stack alignItems="center">
        <SwitchInput />
        <SwitchLabel label="Switch" />
    </Stack>
</Switch>

Switch

error / errorMessage


<Switch error errorMessage="Please check this option">
    <Stack alignItems="center">
        <SwitchInput />
        <SwitchLabel label="Switch" />
    </Stack>
</Switch>

Switch

Please check this option

behaviour


<Switch behaviour="toggle">
    <Stack alignItems="center">
        <SwitchLabel label="Switch" />
        <SwitchInput />
        <SwitchLabel label="Switch" />
    </Stack>
</Switch>

SwitchSwitch

theme


<Switch theme="secondary500">
    <Stack alignItems="center">
        <SwitchLabel label="Switch" />
        <SwitchInput />
        <SwitchLabel label="Switch" />
    </Stack>
</Switch>

Switch

Event Handling


<Switch
    disabled
    onChange={(event, isChecked) => {}}
    onBlur={() => {}}
>
    <SwitchInput />
</Switch>

Full API

Name	Type	Default
`behaviour`	`"toggle" \| "switch" \| undefined` The behaviour of the switch, either a toggle or a switch. Toggle will be styled such that there is no on and off state, it simply moves the active state from one side to the other.	`switch`
`checked`	`boolean` If `true`, the checkbox will be checked by default. This value should be controlled by the parent component.
`children`	`React.ReactNode`
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.
`error`	`boolean` If `true`, the component will have error styling set.
`errorMessage`	`string` If set, the `ErrorMessage` component will be rendered below the input with this text.
`id`	`string` The ID to be set on the switch.
`name`	`string` The field name used on the POST request when the form is submitted.
`onBlur`	`FocusEventHandler<HTMLInputElement>` Callback fired when the switch loses user focus.
`onChange`	`(event: ChangeEvent<HTMLInputElement>, isChecked: boolean) => void` Callback fired each time the user checks or unchecks the switch. `event` The event source of the callback. `isChecked` The checked state of the switch.
`theme`	`"tertiary500" \| "secondary500" \| undefined` The colour of the Switch	`tertiary500`

Design

Good to know

Choose a switch if you want a user to easily toggle between one option to another for example: Electricity OR Gas and Electricity. Using a switch should make it super easy for a user to compare available options such a seeing the prices for an electric only tariff compared to a gas and electric tariff.

Component breakdown

Colour: Voltage & Ice
Label: Body 2