Switch #

import { PSwitch } from 'pearkit';

Basic #

Standard switch component for form components

const [value, setValue] = useState(false);

<PSwitch checked={value} onChange={() => setValue(!value)}/>

Colors #

Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. For example : sky red indigo

<PSwitch disabled color="orange" />

Disabled #

For the disabled property, it is sufficient to provide the property itself directly.

<PSwitch disabled />

Accessibility (Beta) #

None

Api #

Here you can see all the working features for the switch component.

NameTypeDefaultDescription
colorTwColorblueColor of switch component.
Radio
Tabs