Getting Started
  • Installation
Components
  • Alert
  • Badge
  • Button
  • Card
  • Checkbox
  • Drawer
  • Dropdown
  • Input
  • Modal
  • Overlay
  • Radio
  • Switch
  • Tabs
  • Tag
  • Toast
Advanced Components
  • Searchable Select
  • Datatable (Beta)
Radio
Tabs

    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.