RadioGroup

Use RadioGroup when you need to capture user feedback limited to certain options. If you more that 5 options consider using Select instead of RadioGroup, as it provides better UX for large data sets.

<RadioGroup
  label="Select your favorite framework/library"
  description="This is anonymous"
  required
>
  <Radio value="react">React</Radio>
  <Radio value="svelte">Svelte</Radio>
  <Radio value="ng">Angular</Radio>
  <Radio value="vue">Vue</Radio>
</RadioGroup>

Size

Checkbox has 5 predefined sizes: xs, sm, md, lg, xl. Size defines label font-size, input width and height.

Controlled

import { useState } from 'react';
import { RadioGroup, Radio } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('react');

  return (
    <RadioGroup
      value={value}
      onChange={setValue}
      label="Select your favorite framework/library"
      description="This is anonymous"
      required
    >
      <Radio value="react">React</Radio>
      <Radio value="svelte">Svelte</Radio>
      <Radio value="ng">Angular</Radio>
      <Radio value="vue">Vue</Radio>
    </RadioGroup>
  );
}

Get input ref

import { useRef } from 'react';
import { Select } from '@mantine/core';

function Demo() {
  const ref = useRef();

  return (
    <RadioGroup>
      <Radio value="react">React</Radio>
      <Radio value="svelte" ref={ref}>
        Svelte
      </Radio>
    </RadioGroup>
  );
}

RadioGroup

Usage

Size

Controlled

Get input ref