RadioGroup

RadiosGroup are used when only one choice may be selected in a series of options. RadioGroup composes Radio component. It users Ariakit's Radio component internally.

import {
  RadioGroup,
  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

import { RadioGroup, Radio } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <RadioGroupStack />;
};

import { RadioGroup, Radio } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <RadioGroupStack />;
};

RadioGroup Stack

RadioGroup can be arranged vertical or horizontal

import { RadioGroup, Radio } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <RadioGroupStack />;
};

import { RadioGroup, Radio } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <RadioGroupStack />;
};

RadioGroup Show More

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

import { RadioGroup, Radio } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <RadioGroupStack />;
};

import { RadioGroup, Radio } from "@adaptui/react-tailwind";

export const App = props => {
  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>
    );
  };

  return <RadioGroupStack />;
};

API Reference

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

Last updated on July 27, 2022

RadioGroup

Imports#

Usage#

RadioGroup sizes#

RadioGroup Stack#

RadioGroup Show More#

API Reference#

Imports

Usage

RadioGroup sizes

RadioGroup Stack

RadioGroup Show More

API Reference