string
ToggleButton
Toggle between different states in your app with either a checkbox or radio mode.
- Beta
Get Pro
Import#
ToggleButton
: A button extended with anisChecked
state to show on/off.ToggleButtonGroup
: Used to group toggle buttons whose actions are related, that also flushes them together.
import { ToggleButton, ToggleButtonGroup } from '@saas-ui/pro'
Usage#
Checkbox group#
<ToggleButtonGrouptype="checkbox"defaultValue={['1', '2']}onChange={(e) => console.log(e)}><ToggleButton value="2">Leads</ToggleButton><ToggleButton value="3">Customers</ToggleButton></ToggleButtonGroup>
Radio#
<ToggleButtonGrouptype="radio"defaultValue="1"onChange={(e) => console.log(e)}><ToggleButton value="1">All</ToggleButton><ToggleButton value="2">Leads</ToggleButton><ToggleButton value="3">Customers</ToggleButton></ToggleButtonGroup>
Colorscheme#
A colorScheme
can be passed to ToggleButtonGroup
to modify the theme of all of the child buttons.
<ToggleButtonGrouptype="checkbox"colorScheme="cyan"defaultValue={['1', '2']}onChange={(e) => console.log(e)}><ToggleButton value="1">All</ToggleButton><ToggleButton value="2">Leads</ToggleButton><ToggleButton value="3">Customers</ToggleButton></ToggleButtonGroup>
Variants#
Supported variants are outline
(default) and ghost
.
<ToggleButtonGrouptype="checkbox"variant="ghost"defaultValue={['1', '2']}onChange={(e) => console.log(e)}><ToggleButton value="1">All</ToggleButton><ToggleButton value="2">Leads</ToggleButton><ToggleButton value="3">Customers</ToggleButton></ToggleButtonGroup>
Props#
ToggleButton props#
value
required
value
required
Type
toggleProps
toggleProps
Type
ToggleProps
type
type
Type
Type
ToggleButtonGroup props#
defaultValue
defaultValue
Type
TValue[] | Value
name
name
Type
string
onChange
onChange
Type
((value: TType extends "checkbox" ? TValue[] : TValue) => void)
ref
ref
Type
ForwardedRef<HTMLDivElement>
type
type
Type
Type
value
value
Type
TValue[] | Value
Was this helpful?