Switch

Import#

import { Switch } from '@volue/wave-react';

Switch is a compound component that consists of multiple parts:

• ​
  Switch: The wrapper that contains all the parts of a switch and provides context for its children.
• ​
  Switch.Label: The label of the switch.
• ​
  Switch.Indicator: The visual indicator of the switch state.
• ​
  Switch.On: The text for the on state.
• ​
  Switch.Off: The text for the off state.

Examples#

Basic#

Use Switch when you need to represent the switching between two mutually exclusive states or on-off state.

Switch works in an uncontrolled way by default, meaning each Switch component instance is responsible for managing its own state internally.

Controlled Switch#

You can easily make the switch controlled, by passing your own state to isActive prop. onIsActiveChange handler is called when the state of the switch changes, allowing you to sync state.

Sizes#

Wave provides two Switch sizes ‐ medium and small, with the medium size used by default.

Multi-sizing#

Wave provides applySizes utility, which lets you specify size "scopes" within your app. All controls within a scope will share the same size unless overwritten on a per-control basis.

Disabled Switch#

Labels#

It's recommended to use "On" or "Off" text labels unless there are other labels (no longer than three of four characters) that are more specific for the setting.

HTML Form integration#

When used in the context of an HTML form, Switch automatically renders hidden input element that is kept in sync with the switch state.

You just need to provide name property (and optionally value) that will be used when submitting the form.

API Reference#

Switch#

Switch.Label#