Usage
Label position
Size
xs
sm
md
lg
xl
Color
import { Radio } from '@mantine/core';
function Demo() {
return (
<Radio
label="I cannot be unchecked"
/>
);
}Controlled
import { useState } from 'react';
import { Radio } from '@mantine/core';
function Demo() {
const [checked, setChecked] = useState(false);
return <Radio checked={checked} onChange={(event) => setChecked(event.currentTarget.checked)} />;
}Change icon
import { Radio, CheckIcon } from '@mantine/core';
function Demo() {
return (
<Radio icon={CheckIcon} label="Custom check icon" name="check" value="check" defaultChecked />
);
}Disabled state
import { Radio, Group } from '@mantine/core';
function Demo() {
return (
<Group>
<Radio checked disabled label="React" value="react" />
<Radio disabled label="Angular" value="nu" />
<Radio disabled label="Svelte" value="sv" />
</Group>
);
}Radio.Group component
Select your favorite framework/library *
This is anonymous
import { Radio } from '@mantine/core';
function Demo() {
return (
<Radio.Group
name="favoriteFramework"
label="Select your favorite framework/library"
description="This is anonymous"
withAsterisk
>
<Group mt="xs">
<Radio value="react" label="React" />
<Radio value="svelte" label="Svelte" />
<Radio value="ng" label="Angular" />
<Radio value="vue" label="Vue" />
</Group>
</Radio.Group>
);
}Controlled Radio.Group
import { useState } from 'react';
import { Radio } from '@mantine/core';
function Demo() {
const [value, setValue] = useState('react');
return (
<Radio.Group
value={value}
onChange={setValue}
name="favoriteFramework"
label="Select your favorite framework/library"
description="This is anonymous"
withAsterisk
>
<Radio value="react" label="React" />
<Radio value="svelte" label="Svelte" />
<Radio value="ng" label="Angular" />
<Radio value="vue" label="Vue" />
</Radio.Group>
);
}Get element ref
import { useRef } from 'react';
import { Radio } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLInputElement>(null);
return <Radio ref={ref} />;
}Welcome to Mantine, React components library that you always wished for
Build fully functional accessible web applications faster than ever