Radio group

Playground

'use client';
import { useState } from 'react';
import { RadioGroup, RadioGroupItem } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "mode": "vertical",
    "disabled": false
  };
  const [value, setValue] = useState('0');
  const items = ['A', 'B', 'C'];
  return (
    <RadioGroup
      orientation={settings.mode as 'vertical' | 'horizontal'}
      style={{
        display: 'flex',
        flexDirection: settings.mode === 'horizontal' ? 'row' : 'column',
      }}
      value={value}
      onValueChange={setValue}
      disabled={settings.disabled}
      aria-label={"Choose an option"}
    >
      {items.map((label, index) => (
        <label
          key={index}
          style={{ display: 'flex', gap: 10, alignItems: 'center', margin: 12 }}
        >
          <RadioGroupItem value={String(index)} />
          {label}
        </label>
      ))}
    </RadioGroup>
  );
}

Properties

Orientation

Disabled

Usage

Use RadioGroup when only one option can be selected. Give each RadioGroupItem a unique value.

'use client';
import { RadioGroup, RadioGroupItem } from '@mbsw/ui';

export default function Example() {
  return (
    <RadioGroup defaultValue="0" aria-label={"Choose an option"}>
      <label>
        <RadioGroupItem value="0" /> A
      </label>
      <label>
        <RadioGroupItem value="1" /> B
      </label>
    </RadioGroup>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

RadioGroupRadioGroupItem