Radio

Wrapper for input type radio
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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

Disabled state

import { Radio } from '@mantine/core';


function Demo() {
  return (
    <>
      <Radio checked disabled label="React" value="react" />
      <Radio disabled label="Angular" value="nu" />
      <Radio disabled label="Svelte" value="sv" />
    </>
  );
}

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 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

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" | "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

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
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

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
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter