@rmwc/radio

Radio Buttons

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

• Module @rmwc/radio
• Import styles:
  • Using CSS Loader
    • import '@rmwc/radio/styles';
  • Or include stylesheets
    • '@material/radio/dist/mdc.radio.css'
    • '@material/form-field/dist/mdc.form-field.css'
    • '@material/ripple/dist/mdc.ripple.css'
• MDC Docs: https://material.io/develop/web/components/input-controls/radio-buttons/

Controlled Usage

function Example() {
  const [value, setValue] = React.useState('cookies');

  return (
    <>
      <Radio
        value="cookies"
        checked={value === 'cookies'}
        onChange={(evt) => setValue(String(evt.currentTarget.value))}
      >
        Cookies
      </Radio>

      <Radio
        value="pizza"
        checked={value === 'pizza'}
        onChange={(evt) => setValue(String(evt.currentTarget.value))}
      >
        Pizza
      </Radio>

      <Radio
        value="icecream"
        checked={value === 'icecream'}
        onChange={(evt) => setValue(String(evt.currentTarget.value))}
      >
        Icecream
      </Radio>
    </>
  );
}

Uncontrolled Usage

You can use Radio Buttons and receive change events without having to manually set the checked prop. Just give the Radio components the same name. This example also shows using the label prop instead of setting the label as a child.

<>
  <Radio
    label="Cookies"
    value="cookies"
    name="myRadioGroup"
    onChange={(evt) => console.log(evt.currentTarget.value)}
  />

  <Radio
    label="Pizza"
    value="pizza"
    name="myRadioGroup"
    onChange={(evt) => console.log(evt.currentTarget.value)}
  />

  <Radio
    label="Icecream"
    value="icecream"
    name="myRadioGroup"
    onChange={(evt) => console.log(evt.currentTarget.value)}
  />
</>

Radio

A Radio button component.

Props

Name	Type	Description
checked	boolean	Toggle the control on and off.
disabled	boolean	Disables the control.
foundationRef	Ref<MDCRadioFoundation<>>	Advanced: A reference to the MDCFoundation.
id	string	A DOM ID for the toggle.
inputRef	Ref<HTMLInputElement<>>	A reference to the native input.
label	ReactNode	A label for the control.
ripple	RipplePropT	Adds a ripple effect to the component
rootProps	HTMLProps<any>	By default, all props except className and style spread to the input. These are additional props for the root of the checkbox.
value	string | number | string[]	The value of the control.

Changelog

14.3.5 (2024-10-24)

🩹 Fixes

• List: improve documentation's rendering of prop table (df0d6fcb)
• select: get display value (33a9d667)

❤️ Thank You

• Emilie
• Matt @mgr34