Radio

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

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

Pizza Toppings
SupremeMeatVegetarian
() => {
  const [value, setValue] = 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] = 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

Radio

Pizza Toppings

Props#

Props