Overview
- Getting Started
- Loading States
- Forms
- Feature Flags
- Portal
- Show
- For
- Text
- Toggle
- Local Storage
Actions
- Button
- Icon Button
Communication
- Admonition
- Accordion
- Avatar
- Notifications
- Progress Indicators
- Tag
- Tooltip
Containment
- Confirm Modal
- Prompt Modal
- CTA Modal
- Modaldeprecated
- Dialog
- Table
Navigation
- Menu
- Tabs
Selection
- Drag & Drop
- Checkbox
- Date Picker
- Radio
- Rating
- Select
- Combobox
- Switch
Inputs
- Field
- Input
- Textarea
- Labeldeprecated
- Fieldset
- Field Messagedeprecated
- File Uploader
Hooks & Helpers
- split-props
- trap-focusdeprecated
- use-root-colors
- use-theme
- use-theme-context
- use-toggledeprecated
Switch
Switches toggle the selection of a form item on or off
1import { Switch, SwitchParts } from '@cerberus/react'Usage
With Field
To use the Switch within a form, wrap it with the Field component.
Sizes
Primitives
You can utilize the primitive components to customize the checkbox.
| Component | Description |
|---|---|
| SwitchRoot | The context provider for the switch parts |
| SwitchLabel | The label of the switch |
| SwitchControl | The visual input of the switch |
| SwitchThumb | The thumb of the switch state |
| SwitchHiddenInput | The native input for the switch |
API
Props
The Switch component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | This size of the Switch. |
The Switch component also accepts all the props of the SwitchRoot primitive props
Parts
The SwitchParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The SwitchRoot component which is the Provider for the family. |
| Label | The SwitchLabel component which displays the label. |
| Control | The SwitchControl component which is the visual field. |
| Thumb | The SwitchThumb component which displays the thumb of the switch. |
| HiddenInput | The SwitchHiddenInput component which displays the native input. |
1import { Switch, SwitchParts } from '@cerberus/react'Usage
With Field
To use the Switch within a form, wrap it with the Field component.
Sizes
Primitives
You can utilize the primitive components to customize the checkbox.
| Component | Description |
|---|---|
| SwitchRoot | The context provider for the switch parts |
| SwitchLabel | The label of the switch |
| SwitchControl | The visual input of the switch |
| SwitchThumb | The thumb of the switch state |
| SwitchHiddenInput | The native input for the switch |
API
Props
The Switch component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | This size of the Switch. |
The Switch component also accepts all the props of the SwitchRoot primitive props
Parts
The SwitchParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The SwitchRoot component which is the Provider for the family. |
| Label | The SwitchLabel component which displays the label. |
| Control | The SwitchControl component which is the visual field. |
| Thumb | The SwitchThumb component which displays the thumb of the switch. |
| HiddenInput | The SwitchHiddenInput component which displays the native input. |
1import { Switch, SwitchParts } from '@cerberus/react'Usage
With Field
To use the Switch within a form, wrap it with the Field component.
Sizes
Primitives
You can utilize the primitive components to customize the checkbox.
| Component | Description |
|---|---|
| SwitchRoot | The context provider for the switch parts |
| SwitchLabel | The label of the switch |
| SwitchControl | The visual input of the switch |
| SwitchThumb | The thumb of the switch state |
| SwitchHiddenInput | The native input for the switch |
API
Props
The Switch component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | This size of the Switch. |
The Switch component also accepts all the props of the SwitchRoot primitive props
Parts
The SwitchParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The SwitchRoot component which is the Provider for the family. |
| Label | The SwitchLabel component which displays the label. |
| Control | The SwitchControl component which is the visual field. |
| Thumb | The SwitchThumb component which displays the thumb of the switch. |
| HiddenInput | The SwitchHiddenInput component which displays the native input. |
1import { Switch, SwitchParts } from '@cerberus/react'Usage
With Field
To use the Switch within a form, wrap it with the Field component.
Sizes
Primitives
You can utilize the primitive components to customize the checkbox.
| Component | Description |
|---|---|
| SwitchRoot | The context provider for the switch parts |
| SwitchLabel | The label of the switch |
| SwitchControl | The visual input of the switch |
| SwitchThumb | The thumb of the switch state |
| SwitchHiddenInput | The native input for the switch |
API
Props
The Switch component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | This size of the Switch. |
The Switch component also accepts all the props of the SwitchRoot primitive props
Parts
The SwitchParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The SwitchRoot component which is the Provider for the family. |
| Label | The SwitchLabel component which displays the label. |
| Control | The SwitchControl component which is the visual field. |
| Thumb | The SwitchThumb component which displays the thumb of the switch. |
| HiddenInput | The SwitchHiddenInput component which displays the native input. |