Radio

Radio composes Ariakit's radio component. A Single Radio doesn't make sense without RadioGroup.

import {
  Radio,
  RadioDescription,
  RadioIcon,
  RadioInput,
  RadioLabel,
  RadioText,
  RadioTextWrapper,
} from "@adaptui/react-tailwind";

💡

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

Usage

<Radio value="apple" label="Apple"  />

<Radio value="apple" label="Apple"  />

Disabled

Radio sizes

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

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

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Radio value="apple" label="Apple" size="sm" />
      <Radio value="apple" label="Apple" size="md" />
      <Radio value="apple" label="Apple" size="lg" />
    </div>
  );
};

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

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Radio value="apple" label="Apple" size="sm" />
      <Radio value="apple" label="Apple" size="md" />
      <Radio value="apple" label="Apple" size="lg" />
    </div>
  );
};

Radio UI states

Radio can be controlled using state prop.

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

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Radio size="md" value="apple" label="Apple" />
      <Radio size="md" value="apple" label="Apple" disabled="true" />
    </div>
  );
};

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

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Radio size="md" value="apple" label="Apple" />
      <Radio size="md" value="apple" label="Apple" disabled="true" />
    </div>
  );
};

Radio Disabled states

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

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Radio size="md" value="apple" label="Apple" disabled />
      <Radio size="md" value="apple" label="Apple" state="apple" disabled />
    </div>
  );
};

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

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Radio size="md" value="apple" label="Apple" disabled />
      <Radio size="md" value="apple" label="Apple" state="apple" disabled />
    </div>
  );
};

Radio Label & Description

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

export const App = props => {
  return (
    <div className="inline-flex w-72 flex-col space-y-2">
      <Radio size="md" value="apple" label="Apple" />
      <Radio
        size="md"
        value="apple"
        label="Used when the Radio is selected and will use its value for the form submission."
      />
      <Radio
        size="md"
        value="apple"
        label="Apple"
        description="Used when the Radio is selected and will use its value for the form submission."
      />
    </div>
  );
};

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

export const App = props => {
  return (
    <div className="inline-flex w-72 flex-col space-y-2">
      <Radio size="md" value="apple" label="Apple" />
      <Radio
        size="md"
        value="apple"
        label="Used when the Radio is selected and will use its value for the form submission."
      />
      <Radio
        size="md"
        value="apple"
        label="Apple"
        description="Used when the Radio is selected and will use its value for the form submission."
      />
    </div>
  );
};

API Reference

Prop	Type	Default
`size`	`union`	`md`
`disabled`	`boolean`	`false`
`isChecked`	`boolean`	`false`
`label`	`React.ReactNode`	-
`description`	`React.ReactNode`	-
`icon`	`React.ReactNode`	-

Last updated on July 27, 2022

Radio

Imports#

Usage#

Radio sizes#

Radio UI states#

Radio Disabled states#

Radio Label & Description#

API Reference#

Imports