Switch

Switches are used for switching between two states or an on-off state.

Example

To have the larger or smaller switches, use the size property.

Small

Medium (default)

Large

You can use the checked, and onChange properties to control the behaviour of the switch.

Label

Learn more about the properties and the customization points.

import Switch from "@sonnat/ui/Switch";

//or
import { Switch } from "@sonnat/ui";

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Switch Properties
Name	Type	Default	Description
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
label	string	-	If `label` was provided, a `<label>` element will be rendered next to the switch.
name	string	-	The name of the switch.
value	string	-	The value of the switch. The DOM API casts this to a string. The browser uses `"on"` as the default value.
size	"large" \| "medium" \| "small"	"medium"	The size of the switch.
autoFocus	boolean	false	If `true`, the switch will be focused automatically.
fluid	boolean	false	If `true`, the switch will fill the entire width of the parent.
readOnly	boolean	false	If `true`, the switch will be read-only.
checked	boolean	-	If `true`, the switch will be checked.
defaultChecked	boolean	-	The default state of `checked`. Use when the component is not controlled.
disabled	boolean	false	If `true`, the switch will be disabled.
required	boolean	false	If `true`, the switch will be required.
hasError	boolean	false	If `true`, the switch will indicate invalid input.
inputProps	object	-	The properties applied to the `input` element.
labelProps	object	-	The properties applied to the `label` element.
onChange	function	-	The callback fires when the state has changed. Signature: `function(checkedState: boolean) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.