RadioGroup

Capture user feedback limited to small set of options

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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.

Component supports all props from InputWrapper component. See full information about shared inputs props in inputs guide.

Size

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

You can get checkbox sizes by importing RADIO_SIZES:

import { RADIO_SIZES } from '@mantine/core';

Prop value	Width and height
xs	12px
sm	16px
md	20px
lg	26px
xl	36px

Controlled

import React, { 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 element ref

You can get input ref with elementRef prop on Radio component:

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

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

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