# ChoiceGroup

A segmented control for a few mutually exclusive options.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/ChoiceGroup.tsx)

## Overview

A choice group is a single-select segmented control for a few mutually exclusive options.

Use it when the options fit on screen. Use `Select` for longer lists.

## Examples

### Basic

```tsx
import { ChoiceGroup } from '@tempoxyz/ds'

export function Demo() {
  return (
    <ChoiceGroup.Root aria-label="Amount" defaultValue="50">
      <ChoiceGroup.Item value="20">$20</ChoiceGroup.Item>
      <ChoiceGroup.Item value="50">$50</ChoiceGroup.Item>
      <ChoiceGroup.Item value="100">$100</ChoiceGroup.Item>
    </ChoiceGroup.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ChoiceGroup/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { ChoiceGroup, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.stack()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <ChoiceGroup.Root aria-label={`Amount ${size}`} defaultValue="50" key={size} size={size}>
          <ChoiceGroup.Item value="20">$20</ChoiceGroup.Item>
          <ChoiceGroup.Item value="50">$50</ChoiceGroup.Item>
          <ChoiceGroup.Item value="100">$100</ChoiceGroup.Item>
        </ChoiceGroup.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({
    alignItems: 'flex-start',
    display: 'flex',
    flexDirection: 'column',
    gap: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ChoiceGroup/Size.tsx)

### Variant

Set `variant` to `default` or `chips`. It defaults to `default`. `chips` renders a horizontally scrolling row of pills, with an optional `ChoiceGroup.ItemIcon`.

```tsx
import { ChoiceGroup, style } from '@tempoxyz/ds'
import { Coins, Ethereum, Globe } from '@tempoxyz/ds/icons'

const networks = [
  { icon: <Coins />, label: 'Tempo' },
  { icon: <Ethereum />, label: 'Ethereum' },
  { icon: <Globe />, label: 'Base' },
  { icon: <Globe />, label: 'Arbitrum' },
  { icon: <Globe />, label: 'Optimism' },
]

export function Demo() {
  return (
    <div {...styles.stack()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <ChoiceGroup.Root
          aria-label={`Network ${size}`}
          defaultValue="Tempo"
          key={size}
          size={size}
          variant="chips"
        >
          {networks.map((network) => (
            <ChoiceGroup.Item key={network.label} value={network.label}>
              <ChoiceGroup.ItemIcon>{network.icon}</ChoiceGroup.ItemIcon>
              {network.label}
            </ChoiceGroup.Item>
          ))}
        </ChoiceGroup.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const stack = style({
    alignItems: 'flex-start',
    display: 'flex',
    flexDirection: 'column',
    gap: '4',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ChoiceGroup/Variant.tsx)

### Disabled

Set `disabled` on a `ChoiceGroup.Item` to make one option unavailable.

```tsx
import { ChoiceGroup } from '@tempoxyz/ds'

export function Demo() {
  return (
    <ChoiceGroup.Root aria-label="Amount" defaultValue="50">
      <ChoiceGroup.Item value="20">$20</ChoiceGroup.Item>
      <ChoiceGroup.Item value="50">$50</ChoiceGroup.Item>
      <ChoiceGroup.Item value="100">$100</ChoiceGroup.Item>
      <ChoiceGroup.Item disabled value="other">
        Other
      </ChoiceGroup.Item>
    </ChoiceGroup.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ChoiceGroup/Disabled.tsx)

## Guidelines

TODO: Write guidelines for ChoiceGroup.