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
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
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.

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

You can get input ref with ref 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" ref={ref}>
Svelte
</Radio>
</RadioGroup>
);
}
Build fully functional accessible web applications faster than ever
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