# Switch
Toggle between two states, such as on/off.
```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
export default function Default() {
const [checked, setChecked] = useState(false);
return (
setChecked(details.checked)}>
Label
Checked: {checked.toString()}
);
}
```
## Color
Use the [Tailwind data attribute syntax](https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes) to target the state using `data-[state=checked]`
```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
export default function Colors() {
return (
Label
);
}
```
## List
Use the `Label` component to create a list layout.
```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
export default function List() {
return (
);
}
```
## Icons
Add icons to act as state indicators.
```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
import { MoonIcon, SunIcon } from 'lucide-react';
export default function ThumbIcons() {
return (
{(switch_) => (switch_.checked ? : )}
Label
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Label
);
}
```
## Anatomy
Here's an overview of how the Switch component is structured in code:
```tsx
import { Switch } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference