Radio

Wrapper for input type radio
Import

Usage

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

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

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 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
description
ReactNode
description, displayed after label
error
ReactNode
Displays error message after input
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
labelPosition
"left" | "right"
Position of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined label fontSize, radio width, height and border-radius
transitionDuration
number
Animation duration in ms
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" | "description" | "error")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
name
string
Name attribute of radio inputs
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 required attribute to the input and 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
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps
Record<string, any>
Props spread to root element

Radio component Styles API

NameStatic selectorDescription
root.mantine-Radio-rootroot radio element
body.mantine-Radio-bodyWrapper for label and radio button
labelWrapper.mantine-Radio-labelWrapperInclude label and description component
radio.mantine-Radio-radioRadio button
inner.mantine-Radio-innerRadio button inner, contains input and icon
icon.mantine-Radio-iconRadio button icon
error.mantine-Radio-errorError message
description.mantine-Radio-descriptionDescription
label.mantine-Radio-labelLabel