Switch
Switches are used to toggle between two states. They are commonly used to represent an on/off state.
Import
- Global
- Single
import { Switch } from '@rothko-ui/react';
Usage
- Example
- Code
Switch with label
With Icon
- Example
- Code
Disabled
- Example
- Code
With Kind
- Example
- Code
primary
secondary
success
danger
warning
info
Props
| Name | Type | Default | Description |
|---|---|---|---|
Name children | Type ReactNode | Default | Description The content of the switch |
Name className | Type string | Default | Description CSS class name(s) |
Name classNames | Type Objecct<StyleableComponents, string> | Default | Description Additional class names for the switch |
Name disabled | Type boolean | Default | Description Specifies whether the switch is disabled |
Name error | Type boolean | Default | Description Specifies whether the switch has an error state |
Name errorText | Type string | Default "Invalid" | Description The error text to be displayed when the switch is in an error state |
Name kind | Type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | Default | Description The switch's semantic style |
Name offIcon | Type ReactElement | Default | Description The icon element to be displayed when the switch is in the "off" state |
Name onChange | Type (selected: boolean) => void | Default | Description The event handler called when the switch's value changes |
Name onIcon | Type ReactElement | Default | Description The icon element to be displayed when the switch is in the "on" state |
Name selected | Type boolean | Default | Description Specifies whether the switch is selected |
Name style | Type React.CSSProperties | Default | Description Inline style for the switch |
Name styles | Type Object<StyleableComponents, string> | Default | Description Additional inline styles for the switch |