Radio Group

API
- ClayForm.RadioGroup
- ClayForm.Radio

One

Two

Three

import {ClayRadio, ClayRadioGroup} from '@clayui/form';

import {ClayRadio, ClayRadioGroup} from '@clayui/form';

const Component = () => {
  const [value, setValue] = useState("one");

  return (
    <ClayRadioGroup
      inline
      onSelectedValueChange={val => setValue(val)}
      selectedValue={value}
    >
      <ClayRadio label="One" value="one" />
      <ClayRadio label="Two" value="two" />
      <ClayRadio label="Three" value="three" />
    </ClayRadioGroup>
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState("one");
  return (
    <ClayRadioGroup
      inline
      onSelectedValueChange={val => setValue(val)}
      selectedValue={value}
    >
      <ClayRadio label="One" value="one" />
      <ClayRadio label="Two" value="two" />
      <ClayRadio label="Three" value="three" />
    </ClayRadioGroup>
  );
};
render(<Component />);

API

ClayForm.RadioGroup

Property	Type	Required	Description
children	Array< React.ReactElement<IRadioProps> \| React.ReactElement<IToggleProps> >	true	Takes either Radio or Toggle as a child.
inline	boolean	false	Flag to indicate if radio elements should display inline.
name	string	false	Form element `name` that is applied to each radio element.
onSelectedValueChange	(val: React.ReactText) => void	true	Callback function for whenever a radio element is selected.
selectedValue	React.ReactText	false	The value that corresponds to the selected radio element. Leave undefined if no option is selected.

ClayForm.Radio

Property	Type	Required	Default	Description
containerProps	React.HTMLAttributes<HTMLDivElement>	false	{className: ''}	Props for the outer most container element.
inline	boolean	false		Flag to indicate if radio elements should display inline.
label	React.ReactText	false		Text to describe for radio element.
value	React.ReactText	true		Value provided if element is selected.