Radio

Wrapper for input type radio
Import

Usage

Size
xs
sm
md
lg
xl
Color
import { Radio } from '@mantine/core';
function Demo() {
return <Radio value="react" label="Radio button" defaultChecked />
}

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)} />;
}

Radio.Group component

Select your favorite framework/library
This is anonymous
Orientation
Spacing
xs
sm
md
lg
xl
Offset
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { Radio } from '@mantine/core';
function Demo() {
return (
<Radio.Group
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" />
</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}
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" />
</Radio.Group>
);
}

Get input ref

import { useRef } from 'react';
import { Radio } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLInputElement>(null);
return <Radio value="react" label="React" ref={ref} />;
}
Download more icon variants from https://tabler-icons.io/i/search

Radio component props

NameTypeDescription
color
MantineColor
Active radio color from theme.colors
icon
FC<Pick<SVGProps<SVGSVGElement>, "string" | "children" | "clipPath" | "color" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | ... 459 more ... | "zoomAndPan">>
Replace default icon
label
ReactNode
Radio label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label fontSize, radio width, height and border-radius
transitionDuration
number
Animation duration in ms
value *
string
Radio value
wrapperProps
Record<string, any>
Props spread to root element

Radio.Group component props

NameTypeDescription
children *
ReactNode
<Radio /> components
defaultValue
string
Initial value for uncontrolled component
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "error" | "description")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
offset
number | "xs" | "sm" | "md" | "lg" | "xl"
Space between label and inputs
onChange
(value: string) => void
Called when value changes
orientation
"horizontal" | "vertical"
Horizontal or vertical orientation
required
boolean
Adds red asterisk on the right side of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label fontSize, radio width, height and border-radius
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Spacing between radios in horizontal orientation
value
string
Value of currently selected radio
wrapperProps
Record<string, any>
Props spread to root element

Radio component Styles API

NameStatic selectorDescription
radioWrapper.mantine-Radio-radioWrapperWrapper for label and radio button
label.mantine-Radio-labelRadio element
radio.mantine-Radio-radioRadio button
inner.mantine-Radio-innerRadio button inner, contains input and icon
icon.mantine-Radio-iconRadio button icon (svg)