Code

Implementation
Switch Props

Common Examples

import { Switch } from "@servicetitan/anvil2";

function ExampleComponent() {
  return <Switch defaultChecked={true} label="Switch" value="switch-example" />;
}

Controlling switches

Demo

Uncontrolled switch

By default, the state of a switch is handled internally. Use the defaultChecked prop to set the initial state.To access the current value, a React ref can be used. Make sure you understand the differences between refs and state in React.

Demo

Controlled switch

Alternatively, use the checked and onChange props to manually control the checked state.

React Accessibility

The supplied label prop should either be text or a component containing text. If this is not possible, then either an aria-label should be set or a visible label should be referenced with aria-labelledby.
If the page contains additional text needed to fully understand the purpose of the Switch, this text should be referenced with aria-describedby.

For more guidance on form field labels and context, see input field context association best practices.

<Switch
  label="Toggle switch"
  value="switch-1"
  checked={true}
  defaultChecked={false}
  onChange={(event, { value, checked }) => console.log(value, checked)}
  disabled={false}
/>

`Switch` Props

In addition to the props listed below, the Switch component accepts any valid HTML input props.

description

string

Description text to display below the label.

label

ReactElement | string

onChange

(e: ChangeEvent, state: { value: string; checked: boolean }) => void

This replaces the default onChange for the HTML input element.

Anvil2 Web

Resources

Common Examples

Controlling switches

Uncontrolled switch

Controlled switch

React Accessibility

`Switch` Props

Anvil2 Web

Resources

​Common Examples

​Controlling switches

​Uncontrolled switch

​Controlled switch

​React Accessibility

​Switch Props

Common Examples

Controlling switches

Uncontrolled switch

Controlled switch

React Accessibility

`Switch` Props