Skip to content
Telescope
Components

Switch

A control used to switch between two states - often on or off.

Basic usage

First, import the component.

import {Switch} from '@pleo-io/telescope'

Then use it like so:

API reference

The component accepts the following props.

PropTypeDefault
checked
boolean
children
React.ReactNode
description
string
labelPosition
enum
right
onCheckedChange
function
Information:

Also supports properties from the Radix Switch component.

Examples

Within a form

An input[type=checkbox] will also render when used within a form to ensure events propagate correctly.

Controlled

The component can be controlled by passing the checked and onCheckedChange props.

const [checked, setChecked] = React.useState(false)
return (
    <Switch checked={checked} onCheckedChange={isChecked} labelPosition="left">
        Use Fetch
    </Switch>
)
On this page