Radio Group

A set of checkable buttons where only one can be checked at a time.

"use client";

import React, { useState } from "react";

import { RadioGroup } from "@smartacteam/ambient-web/radio-group";

export function RadioGroupDemo() {
  const id1 = React.useId();
  const id2 = React.useId();
  const [value, setValue] = useState("comfortable");

  return (
    <div className="flex flex-col gap-6">
      <RadioGroup.Root
        aria-labelledby={id1}
        value={value}
        onValueChange={(value) => setValue(value as string)}
      >
        <label className="flex items-center gap-2">
          <RadioGroup.Item value="default" />
          <span className="text-sm">Default</span>
        </label>
        <label className="flex items-center gap-2">
          <RadioGroup.Item value="comfortable" />
          <span className="text-sm">Comfortable</span>
        </label>
        <label className="flex items-center gap-2">
          <RadioGroup.Item value="compact" />
          <span className="text-sm">Compact</span>
        </label>
      </RadioGroup.Root>

      <RadioGroup.Root aria-labelledby={id2} defaultValue="option-1" disabled>
        <label className="flex items-center gap-2">
          <RadioGroup.Item value="option-1" />
          <span className="text-sm text-foreground-secondary">
            Disabled selected
          </span>
        </label>
        <label className="flex items-center gap-2">
          <RadioGroup.Item value="option-2" />
          <span className="text-sm text-foreground-secondary">
            Disabled option
          </span>
        </label>
      </RadioGroup.Root>
    </div>
  );
}

Usage

import {
  RadioGroup,
  RadioGroupItem,
} from "@smartacteam/ambient-web/radio-group";

<RadioGroup defaultValue="option-1">
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-1" />
    <span>Option 1</span>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-2" />
    <span>Option 2</span>
  </label>
</RadioGroup>

Examples

Controlled

const [value, setValue] = useState("option-1");
 
<RadioGroup value={value} onValueChange={setValue}>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-1" />
    <span>Option 1</span>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-2" />
    <span>Option 2</span>
  </label>
</RadioGroup>;

Disabled

<RadioGroup defaultValue="option-1" disabled>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-1" />
    <span>Option 1</span>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-2" />
    <span>Option 2</span>
  </label>
</RadioGroup>

Horizontal Layout

<RadioGroup defaultValue="option-1" className="flex-row">
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-1" />
    <span>Option 1</span>
  </label>
  <label className="flex items-center gap-2">
    <RadioGroupItem value="option-2" />
    <span>Option 2</span>
  </label>
</RadioGroup>

API Reference

RadioGroup

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	-
`onValueChange`	`(value: string) => void`	-
`disabled`	`boolean`	`false`
`name`	`string`	-
`required`	`boolean`	`false`
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`

RadioGroupItem

Prop	Type	Default
`value`	`string`	-
`disabled`	`boolean`	`false`
`required`	`boolean`	`false`