# or
yarn add @zag-js/switch @zag-js/react
```

## Anatomy

To set up the switch correctly, you'll need to understand its anatomy and how we
name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the switch package into your project

```jsx
import * as zagSwitch from "@zag-js/switch"
```

The switch package exports two key functions:

- `machine` â The state machine logic for the switch widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

Next, import the required hooks and functions for your framework and use the
switch machine in your project ð¥

```jsx
import * as zagSwitch from "@zag-js/switch"
import { useMachine, normalizeProps } from "@zag-js/react"

function Checkbox() {
  const service = useMachine(zagSwitch.machine, { id: "1" })

  const api = zagSwitch.connect(service, normalizeProps)

  return (
    <label {...api.getRootProps()}>
      <input {...api.getHiddenInputProps()} />
      <span {...api.getControlProps()}>
        <span {...api.getThumbProps()} />
      </span>
      <span {...api.getLabelProps()}>{api.checked ? "On" : "Off"}</span>
    </label>
  )
}
```

### Disabling the switch

To make a switch disabled, set the `disabled` property to `true`.

```jsx {3}
const service = useMachine(zagSwitch.machine, {
  disabled: true,
})
```

### Making it checked by default

Use the `defaultChecked` property to make a switch checked by default.

```jsx {3}
const service = useMachine(zagSwitch.machine, {
  defaultChecked: true,
})
```

### Listening for changes

When the switch value changes, the `onCheckedChange` callback is invoked.

```jsx {3-5}
const service = useMachine(zagSwitch.machine, {
  onCheckedChange(details) {
    // details => { checked: boolean }
    console.log("switch is:", details.checked ? "On" : "Off")
  },
})
```

### Usage within forms

To use switch within forms, use the exposed `inputProps` from the `connect`
function and ensure you pass `name` value to the machine's context. It will
render a hidden input and ensure the value changes get propagated to the form
correctly.

```jsx {3}
const service = useMachine(zagSwitch.machine, {
  name: "feature",
})
```

## Styling guide

Earlier, we mentioned that each switch part has a `data-part` attribute added to
them to select and style them in the DOM.

### Focused State

When the switch input is focused, the `data-focus` attribute is added to the
root, control and label parts.

```css
[data-part="root"][data-focus] {
  /* styles for root focus state */
}

[data-part="control"][data-focus] {
  /* styles for control focus state */
}

[data-part="label"][data-focus] {
  /* styles for label focus state */
}
```

### Disabled State

When the switch is disabled, the `data-disabled` attribute is added to the root,
control and label parts.

```css
[data-part="root"][data-disabled] {
  /* styles for root disabled state */
}

[data-part="control"][data-disabled] {
  /* styles for control disabled state */
}

[data-part="label"][data-disabled] {
  /* styles for label disabled state */
}
```

### Invalid State

When the switch is invalid, the `data-invalid` attribute is added to the root,
control and label parts.

```css
[data-part="root"][data-invalid] {
  /* styles for root invalid state */
}

[data-part="control"][data-invalid] {
  /* styles for control invalid state */
}

[data-part="label"][data-invalid] {
  /* styles for label invalid state */
}
```

## Methods and Properties

### Machine Context

The switch machine exposes the following context properties:

**`ids`**
Type: `Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }>`
Description: The ids of the elements in the switch. Useful for composition.

**`label`**
Type: `string`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`disabled`**
Type: `boolean`
Description: Whether the switch is disabled.

**`invalid`**
Type: `boolean`
Description: If `true`, the switch is marked as invalid.

**`required`**
Type: `boolean`
Description: If `true`, the switch input is marked as required,

**`readOnly`**
Type: `boolean`
Description: Whether the switch is read-only

**`onCheckedChange`**
Type: `(details: CheckedChangeDetails) => void`
Description: Function to call when the switch is clicked.

**`checked`**
Type: `boolean`
Description: The controlled checked state of the switch

**`defaultChecked`**
Type: `boolean`
Description: The initial checked state of the switch when rendered.
Use when you don't need to control the checked state of the switch.

**`name`**
Type: `string`
Description: The name of the input field in a switch
(Useful for form submission).

**`form`**
Type: `string`
Description: The id of the form that the switch belongs to

**`value`**
Type: `string | number`
Description: The value of switch input. Useful for form submission.

**`dir`**
Type: `"ltr" | "rtl"`
Description: The document's text/writing direction.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

### Machine API

The switch `api` exposes the following methods:

**`checked`**
Type: `boolean`
Description: Whether the switch is checked

**`disabled`**
Type: `boolean`
Description: Whether the switch is disabled

**`focused`**
Type: `boolean`
Description: Whether the switch is focused

**`setChecked`**
Type: `(checked: boolean) => void`
Description: Sets the checked state of the switch.

**`toggleChecked`**
Type: `VoidFunction`
Description: Toggles the checked state of the switch.

### Data Attributes

**`Root`**

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

**`Label`**

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

**`Thumb`**

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

**`Control`**

**`data-active`**: Present when active or pressed
**`data-focus`**: Present when focused
**`data-focus-visible`**: Present when focused with keyboard
**`data-readonly`**: Present when read-only
**`data-hover`**: Present when hovered
**`data-disabled`**: Present when disabled
**`data-state`**: "checked" | "unchecked"
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required

## Accessibility

Adheres to the
[Switch WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)

### Keyboard Interactions

**`Space + Enter`**
Description: Toggle the switch
An accessible tabs component that follows the WAI-ARIA Tabs Design Pattern. Each
tab in the tab list has associated content, with only the selected tab's content
being displayed.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/tabs)
[Logic Visualizer](https://zag-visualizer.vercel.app/tabs)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/tabs)



**Features**

- Support for mouse, touch, and keyboard interactions on tabs
- Support for LTR and RTL keyboard navigation
- Follows the tabs ARIA pattern, semantically linking tabs and their associated
  tab panels
- Focus management for tab panels without any focusable children

## Installation

To use the tabs machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/tabs @zag-js/react