Skip to main content

Radio Input

The <Radio/> component allows to select or deselect options in a form. It provides a customizable checkbox input with various options.

Source@matro-ui/radio

Import​

import { Radio, RadioGroup } from "matro-ui";
  • RadioGroup: The wrapper that provides context and logic to the components.
  • Radio: The radio input itself.

Usage​

Loading...
Live Editor
 <RadioGroup defaultValue="2">
   <Radio value="1">Value 1</Radio>
   <Radio value="2">Value 2</Radio>
 </Radio>

Disabled Radio​

Pass the disabled prop to disable any radio option.

Loading...
Live Editor
 <RadioGroup defaultValue="2">
   <Radio value="1" disabled>Value 1</Radio>
   <Radio value="2" disabled>Value 2</Radio>
   <Radio value="3">Value 3</Radio>
 </Radio>

Radio sizes​

Pass the font-size to change the size of the Radio. Values can be either px, em, rem or %.

Loading...
Live Editor
 <RadioGroup defaultValue="2" style={{fontSize: "21px"}}>
   <Radio value="1" style={{fontSize: "0.7em"}}>Value 1</Radio>
   <Radio value="2">Value 2</Radio>
   <Radio value="3">Value 3</Radio>
 </Radio>

Radio with custom color​

You can override the color scheme of the radio to any color by providing the css variable --bg to RadioGroup or Radio.

Loading...
Live Editor
 <RadioGroup defaultValue="2" style={{"--bg": "purple"}}>
   <Radio value="1">Value 1</Radio>
   <Radio value="2" style={{"--bg": "#48b048"}}>Value 2</Radio>
   <Radio value="3" style={{"--bg": "#4848d7"}}>Value 3</Radio>
 </RadioGroup>