;
}
};
```tsx lines expandable theme={null}
import { Switch } from "@servicetitan/anvil2";
function App() {
return (
{
console.log("\nevent:");
console.log(event);
console.log(`value: ${value}`);
console.log(`checked: ${checked}`);
}}
/>
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Switch } from "@servicetitan/anvil2";
function ExampleComponent() {
return ;
}
```
### Controlling switches
```tsx lines expandable theme={null}
import { Switch, Flex, Button } from "@servicetitan/anvil2";
import { useRef } from "react";
function App() {
const switchRef = useRef(null);
return (
);
}
export default App;
```
#### 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](https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state).
```tsx lines expandable theme={null}
import { Switch, Flex, Button } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [checked, setChecked] = useState(false);
return (
{
setChecked(checked);
}}
label="Switch"
value="switch-example"
/>
);
}
export default App;
```
#### 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](/docs/accessibility/labels-and-ctas#input-field-context-association).
```tsx theme={null}
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 text to display below the label.
Displays an AI indicator icon next to the label. See [AI Marks](/docs/web/utilities/ai-marks) for full API documentation and usage examples.
This replaces the default `onChange` for the HTML `input` element.
