RadioGroup
Capture user feedback limited to small set of options
Import
Source
Docs
Package
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
<RadioGrouplabel="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 value | Width and height |
|---|---|
| xs | 12px |
| sm | 16px |
| md | 20px |
| lg | 24px |
| xl | 36px |
Controlled
import { useState } from 'react';import { RadioGroup, Radio } from '@mantine/core';function Demo() {const [value, setValue] = useState('react');return (<RadioGroupvalue={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>);}
Built by Vitaly Rtishchev and these awesome people