RadioGroup

Capture user feedback limited to small set of options
Import

Usage

Select your favorite framework/library
This is anonymous
Orientation
Spacing
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Color
import { RadioGroup, Radio } from '@mantine/core';
function Demo() {
return (
<RadioGroup
label="Select your favorite framework/library"
description="This is anonymous"
required
>
<Radio value="react" label="React" />
<Radio value="svelte" label="Svelte" />
<Radio value="ng" label="Angular" />
<Radio value="vue" label="Vue" />
</RadioGroup>
);
}

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" label="React" />
<Radio value="svelte" label="Svelte" />
<Radio value="ng" label="Angular" />
<Radio value="vue" label="Vue" />
</RadioGroup>
);
}

Size

Get input ref

import { useRef } from 'react';
import { RadioGroup, Radio } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLInputElement>();
return (
<RadioGroup>
<Radio value="react" label="React" ref={ref} />
<Radio value="svelte" label="Svelte" />
<Radio value="ng" label="Angular" />
<Radio value="vue" label="Vue" />
</RadioGroup>
);
}