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

## Anatomy

To set up the segmented control 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 ð¥

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

const items = [
  { label: "React", value: "react" },
  { label: "Angular", value: "ng" },
  { label: "Vue", value: "vue" },
  { label: "Svelte", value: "svelte" },
]

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

  const api = radio.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <div {...api.getIndicatorProps()} />
      {items.map((opt) => (
        <label key={opt.value} {...api.getItemProps({ value: opt.value })}>
          <span {...api.getItemTextProps({ value: opt.value })}>
            {opt.label}
          </span>
          <input {...api.getItemHiddenInputProps({ value: opt.value })} />
        </label>
      ))}
    </div>
  )
}
```

### Disabling the segmented control

To make a segmented control disabled, set the context's `disabled` property to
true

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

### Making the segmented control readonly

To make a segmented control readonly, set the context's `readOnly` property to
true

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

### Setting the initial value

Use the `defaultValue` property to set the segmented control's initial value.

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

### Listening for changes

When the segmented control value changes, the `onValueChange` callback is
invoked.

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

### Usage within forms

To use segmented control 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 segmented control part has a `data-part`
attribute added to them to select and style them in the DOM.

### Indicator

Style the segmented control Indicator through the `indicator` part.

```css
[data-part="indicator"] {
  /* styles for indicator */
}
```

### Focused State

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

```css
[data-part="radio"][data-focus] {
  /* styles for radio 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
and label parts.

```css
[data-part="radio"][data-disabled] {
  /* styles for radio 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 and
label parts.

```css
[data-part="radio"][data-invalid] {
  /* styles for radio 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:

<ContextTable name="radio-group" />

### Machine API

The radio group `api` exposes the following methods:

<ApiTable name="radio-group" />

### Data Attributes

<DataAttrTable name="radio-group" />
A Select component allows users pick a value from predefined options.

## Resources


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



**Features**

- Support for selecting a single or multiple option
- Keyboard support for opening the listbox using the arrow keys, including
  automatically focusing the first or last item.
- Support for looping keyboard navigation.
- Support for selecting an item on blur.
- Typeahead to allow selecting options by typing text, even without opening the
  listbox
- Support for Right to Left direction.

## Installation

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

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