Radio

The <Radio /> component extends <input type="radio" /> and allows basic styling.

import { RadioGroup, Radio } from 'minerva-ui'

Preview

Pizza Toppings

Supreme

Meat

Vegetarian

Source

() => { const [value, setValue] = React.useState('supreme'); return ( <> <Heading as="h3" fontSize="md" fontWeight={600} mb={3}> Pizza Toppings </Heading> <RadioGroup onChange={e => setValue(e.target.value)} value={value}> <Radio value="supreme">Supreme</Radio> <Radio value="meat">Meat</Radio> <Radio value="vegetarian">Vegetarian</Radio> </RadioGroup> </> ); }

() => {
  const [value, setValue] = React.useState('supreme');
  return (
    <>
      <Heading as="h3" fontSize="md" fontWeight={600} mb={3}>
        Pizza Toppings
      </Heading>
      <RadioGroup onChange={e => setValue(e.target.value)} value={value}>
        <Radio value="supreme">Supreme</Radio>
        <Radio value="meat">Meat</Radio>
        <Radio value="vegetarian">Vegetarian</Radio>
      </RadioGroup>
    </>
  );
}

Props

These are props related to the Radio component.

Name	Type	Is Required	Default	Description
value	string	optional	none	Label for radio
isDisabled	boolean	optional	none	Sets if radio is able to be selected

These are props related to the Radio Group component.

Name	Type	Is Required	Default	Description
value	string	optional	none	Selected value of radio group
radioColor	string	optional	#5850ec	Color of radio button
radioSize	string	optional	16px	Size of radio button
onChange	string	optional	none	Action to take when the state of a radio button in the group is changed