# or
yarn add @zag-js/radio-group @zag-js/vue
```

## Anatomy

To set up the radio group 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 radio group package into your project

```jsx
import * as radio from "@zag-js/radio-group"
```

The radio package exports two key functions:

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

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

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

```html
<script setup>
  import * as radio from "@zag-js/radio-group"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const items = [
    { id: "apple", label: "Apples" },
    { id: "orange", label: "Oranges" },
    { id: "mango", label: "Mangoes" },
    { id: "grape", label: "Grapes" },
  ]

  const service = useMachine(radio.machine, { id: "1" })

  const api = computed(() => radio.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <h3 v-bind="api.getLabelProps()">Fruits</h3>
    <div v-for="opt in items" :key="opt.id">
      <label v-bind="api.getItemProps({ value: opt.id })">
        <span v-bind="api.getItemTextProps({ value: opt.id })"
          >{{ opt.label }}</span
        >
        <input v-bind="api.getItemHiddenInputProps({ value: opt.id })" />
        <div v-bind="api.getItemControlProps({ value: opt.id })" />
      </label>
    </div>
  </div>
</template>
```

### Disabling the radio group

To make a radio group disabled, set the context's `disabled` property to true

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

### Setting the initial value

Use the `defaultValue` property to set the radio group's initial value.

```jsx {2}
const service = useMachine(radio.machine, {
  defaultValue: "apple",
})
```

### Listening for changes

When the radio group value changes, the `onValueChange` callback is invoked.

```jsx {2-7}
const service = useMachine(radio.machine, {
  onValueChange(details) {
    // details => { value: string }
    console.log("radio value is:", details.value)
  },
})
```

### Usage within forms

To use radio group 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 {2}
const service = useMachine(radio.machine, {
  name: "fruits",
})
```

## Styling guide

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

### Checked State

When the radio input is checked, the `data-state` attribute is added to the

```css
[data-part="radio"][data-state="checked|unchecked"] {
  /* styles for radio checked or unchecked state */
}

[data-part="radio-control"][data-state="checked|unchecked"] {
  /* styles for radio checked or unchecked state */
}

[data-part="radio-label"][data-state="checked|unchecked"] {
  /* styles for radio checked or unchecked state */
}
```

### Focused State

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

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

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

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

### Disabled State

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

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

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

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

### Invalid State

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

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

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

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

## Methods and Properties

### Machine Context

The radio group machine exposes the following context properties:

**`ids`**
Type: `Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }>`
Description: The ids of the elements in the radio. Useful for composition.

**`value`**
Type: `string`
Description: The controlled value of the radio group

**`defaultValue`**
Type: `string`
Description: The initial value of the checked radio when rendered.
Use when you don't need to control the value of the radio group.

**`name`**
Type: `string`
Description: The name of the input fields in the radio
(Useful for form submission).

**`form`**
Type: `string`
Description: The associate form of the underlying input.

**`disabled`**
Type: `boolean`
Description: If `true`, the radio group will be disabled

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

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Description: Function called once a radio is checked

**`orientation`**
Type: `"horizontal" | "vertical"`
Description: Orientation of the radio group

**`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 radio group `api` exposes the following methods:

**`value`**
Type: `string`
Description: The current value of the radio group

**`setValue`**
Type: `(value: string) => void`
Description: Function to set the value of the radio group

**`clearValue`**
Type: `VoidFunction`
Description: Function to clear the value of the radio group

**`focus`**
Type: `VoidFunction`
Description: Function to focus the radio group

**`getItemState`**
Type: `(props: ItemProps) => ItemState`
Description: Returns the state details of a radio input

## Accessibility

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

### Keyboard Interactions

**`Tab`**
Description: Moves focus to either the checked radio item or the first radio item in the group.

**`Space`**
Description: When focus is on an unchecked radio item, checks it.

**`ArrowDown`**
Description: Moves focus and checks the next radio item in the group.

**`ArrowRight`**
Description: Moves focus and checks the next radio item in the group.

**`ArrowUp`**
Description: Moves focus to the previous radio item in the group.

**`ArrowLeft`**
Description: Moves focus to the previous radio item in the group.
Rating group allows a user to assign rating to an item within a product.

## Resources


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



**Features**

- Support for syncing `disabled` state of with `fieldset` element
- Support for form `reset` events

## Installation

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

```bash
npm install @zag-js/rating-group @zag-js/vue