Radio

Wrapper for input type radio

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

I cannot be unchecked

LabelPosition

Right

Left

Label

Description

Error

Size

Color

Checked

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

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

Go back

PinInput – @mantine/core

Up next

Rating – @mantine/core

Radio component props

Name	Type	Description
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" \| "clipPath" \| "color" \| "cursor" \| "direction" \| "display" \| "filter" \| "fontFamily" \| "fontSize" \| "fontSizeAdjust" \| ... 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

Name	Type	Description
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
name	string	Name attribute of radio inputs
onChange	(value: string) => void	Called when value changes
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
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

Name	Static selector	Description
root	.mantine-Radio-root	root radio element
body	.mantine-Radio-body	Wrapper for label and radio button
labelWrapper	.mantine-Radio-labelWrapper	Include label and description component
radio	.mantine-Radio-radio	Radio button
inner	.mantine-Radio-inner	Radio button inner, contains input and icon
icon	.mantine-Radio-icon	Radio button icon
error	.mantine-Radio-error	Error message
description	.mantine-Radio-description	Description
label	.mantine-Radio-label	Label

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter