RadioGroup

Capture user feedback limited to small set of options
Import

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.

Select your favorite framework/library *
This is anonymous
Variant
Spacing
Size
Color
<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.

You can get checkbox sizes by importing RADIO_SIZES:

import { RADIO_SIZES } from '@mantine/core';
Prop valueWidth and height
xs12px
sm16px
md20px
lg24px
xl36px

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 element ref

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

import { 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>
);
}
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback