RadioGroup

RadiosGroup are used when only one choice may be selected in a series of options. RadioGroup composes Radio component.

import {
  RadioGroup,
  useRadioGroupProps,
  useRadioGroupState,
  RadioGroupWrapper,
  RadioShowMore,
} from "@renderlesskit/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage


<RadioGroup aria-label="fruits" >
  <Radio value="apple" label="Apple" />
  <Radio value="orange" label="Orange" />
  <Radio value="watermelon" label="Watermelon" />
  <Radio value="grapes" label="Grapes" />
</RadioGroup>


<RadioGroup aria-label="fruits" >
  <Radio value="apple" label="Apple" />
  <Radio value="orange" label="Orange" />
  <Radio value="watermelon" label="Watermelon" />
  <Radio value="grapes" label="Grapes" />
</RadioGroup>

RadioGroup sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg

const RadioGroupBasic = props => {
  return (
    <RadioGroup aria-label="fruits" {...props}>
      <Radio value="apple" label="Apple" />
      <Radio value="orange" label="Orange" />
      <Radio value="watermelon" label="Watermelon" />
      <Radio value="grapes" label="Grapes" />
    </RadioGroup>
  );
};

const RadioGroupStack = props => { return (

<div className="flex space-x-2">
  <RadioGroupBasic size="sm" />
  <RadioGroupBasic size="md" />
  <RadioGroupBasic size="lg" />
</div>
); };

render (<RadioGroupStack/>);

const RadioGroupBasic = props => {
  return (
    <RadioGroup aria-label="fruits" {...props}>
      <Radio value="apple" label="Apple" />
      <Radio value="orange" label="Orange" />
      <Radio value="watermelon" label="Watermelon" />
      <Radio value="grapes" label="Grapes" />
    </RadioGroup>
  );
};

const RadioGroupStack = props => { return (

<div className="flex space-x-2">
  <RadioGroupBasic size="sm" />
  <RadioGroupBasic size="md" />
  <RadioGroupBasic size="lg" />
</div>
); };

render (<RadioGroupStack/>);

RadioGroup Stack

RadioGroup can be arranged vertical or horizontal

const RadioGroupBasic = props => {
  return (
    <RadioGroup aria-label="fruits" {...props}>
      <Radio value="apple" label="Apple" />
      <Radio value="orange" label="Orange" />
      <Radio value="watermelon" label="Watermelon" />
      <Radio value="grapes" label="Grapes" />
    </RadioGroup>
  );
};

const RadioGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <RadioGroupBasic size="md" stack="vertical" />
  <RadioGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<RadioGroupStack/>);

const RadioGroupBasic = props => {
  return (
    <RadioGroup aria-label="fruits" {...props}>
      <Radio value="apple" label="Apple" />
      <Radio value="orange" label="Orange" />
      <Radio value="watermelon" label="Watermelon" />
      <Radio value="grapes" label="Grapes" />
    </RadioGroup>
  );
};

const RadioGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <RadioGroupBasic size="md" stack="vertical" />
  <RadioGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<RadioGroupStack/>);

RadioGroup Show More

RadioGroup with more Radios can be made hidden by adding maxVisibleItems prop

const RadioGroupBasic = props => {
  return (
    <RadioGroup aria-label="fruits" maxVisibleItems={2} {...props}>
      <Radio value="apple" label="Apple" />
      <Radio value="orange" label="Orange" />
      <Radio value="watermelon" label="Watermelon" />
      <Radio value="grapes" label="Grapes" />
    </RadioGroup>
  );
};

const RadioGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <RadioGroupBasic size="md" stack="vertical" className="w-32" />
  <RadioGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<RadioGroupStack/>);

const RadioGroupBasic = props => {
  return (
    <RadioGroup aria-label="fruits" maxVisibleItems={2} {...props}>
      <Radio value="apple" label="Apple" />
      <Radio value="orange" label="Orange" />
      <Radio value="watermelon" label="Watermelon" />
      <Radio value="grapes" label="Grapes" />
    </RadioGroup>
  );
};

const RadioGroupStack = props => { return (

<div className="flex flex-col space-y-2">
  <RadioGroupBasic size="md" stack="vertical" className="w-32" />
  <RadioGroupBasic size="md" stack="horizontal" />
</div>
); };

render (<RadioGroupStack/>);

API Reference

Prop	Type	Default
`size`	`union`	`md`
`stack`	`string`	`vertical`
`maxVisibleItems`	`number`	`null`

Last updated on July 18, 2022

RadioGroup

Imports#

Usage#

RadioGroup sizes#

RadioGroup Stack#

RadioGroup Show More#

API Reference#

Imports

Usage

RadioGroup sizes

RadioGroup Stack

RadioGroup Show More

API Reference