Switch
In addition to Checkbox and Radio, PCR also provides a Switch control to provide a mobile-like experience on the web. Switches have dual-use as radio controls or as checkboxes.
Usage#
By default Switch behaves like a checkbox. To make the switch behave lke a radio, use the type prop:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Shapes, Variants, & States#
There's no "one size fits all" for input controls like Switch.
Thankfully, PCR allows you to represent Radio in various ways via the shape prop
for pre-bundled fun. See the shapes docs for more details.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Disabled & Locked#
Of course disabled is supported, but there's also a secondary state called locked.
See the states docs for more details.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Uncontrolled#
Switch forwards refs to the input element ๐.
See the uncontrolled component docs for more info.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Controlled#
Switch can be used as a radio or a checkbox. Because of this duality, you can use either of the following state hooks:
useCheckboxStateuseRadioState
Controlled as a Checkbox#
Like checkbox, you can use the state hook as a boolean, named, or grouped controls.
Danger, Will Robinson!
switch is a reserved word and the browser will throw an error if you attempt to use the word as a variable ๐
const switch = useCheckboxState();SyntaxError: Unexpected token (1:8)
1 : return ()
^Controlled as a Radio#
Like radio you can use the state hook as a boolean or a named value:
SyntaxError: Unexpected token (1:8)
1 : return ()
^