RadioGroup

A radio group allows a user to select a single item from a list of mutually exclusive options.

Usage#

Demo#

import { Radio, RadioGroup } from "pigment-ui";

function RadioGroupDemo() {
  return (
    <RadioGroup label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Radio value="soccer">Soccer</Radio>
      <Radio value="baseball">Baseball</Radio>
      <Radio value="basketball">Basketball</Radio>
    </RadioGroup>
  );
}

Orientation#

import { Radio, RadioGroup } from "pigment-ui";

function RadioGroupOrientation() {
  return (
    <RadioGroup orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Radio value="soccer">Soccer</Radio>
      <Radio value="baseball">Baseball</Radio>
      <Radio value="basketball">Basketball</Radio>
    </RadioGroup>
  );
}

Size#

import { Radio, RadioGroup } from "pigment-ui";

function RadioGroupSize() {
  return (
    <div className="flex flex-col gap-4">
      <RadioGroup size="sm" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Radio value="soccer">Soccer</Radio>
        <Radio value="baseball">Baseball</Radio>
        <Radio value="basketball">Basketball</Radio>
      </RadioGroup>

      <RadioGroup size="md" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Radio value="soccer">Soccer</Radio>
        <Radio value="baseball">Baseball</Radio>
        <Radio value="basketball">Basketball</Radio>
      </RadioGroup>

      <RadioGroup size="lg" orientation="horizontal" label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Radio value="soccer">Soccer</Radio>
        <Radio value="baseball">Baseball</Radio>
        <Radio value="basketball">Basketball</Radio>
      </RadioGroup>
    </div>
  );
}

Invalid#

import { Radio, RadioGroup } from "pigment-ui";

function RadioGroupInvalid() {
  return (
    <RadioGroup isInvalid errorMessage="This is an error message." label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Radio value="soccer">Soccer</Radio>
      <Radio value="baseball">Baseball</Radio>
      <Radio value="basketball">Basketball</Radio>
    </RadioGroup>
  );
}

Disabled#

import { Radio, RadioGroup } from "pigment-ui";

function RadioGroupDisabled() {
  return (
    <RadioGroup isDisabled label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Radio value="soccer">Soccer</Radio>
      <Radio value="baseball">Baseball</Radio>
      <Radio value="basketball">Basketball</Radio>
    </RadioGroup>
  );
}

Disabled individual#

import { Radio, RadioGroup } from "pigment-ui";

function RadioGroupDisabledIndividual() {
  return (
    <RadioGroup label="Favorite sports" description="Lorem ipsum dolor sit amet.">
      <Radio value="soccer">Soccer</Radio>
      <Radio value="baseball" isDisabled>Baseball</Radio>
      <Radio value="basketball">Basketball</Radio>
    </RadioGroup>
  );
}

Validation#

import { Button, Radio, RadioGroup } from "pigment-ui";

function RadioGroupValidation() {
  return (
    <form className="space-y-4 w-64">
      <RadioGroup isRequired label="Favorite sports" description="Lorem ipsum dolor sit amet.">
        <Radio value="soccer">Soccer</Radio>
        <Radio value="baseball">Baseball</Radio>
        <Radio value="basketball">Basketball</Radio>
      </RadioGroup>
      <Button type="submit">Submit</Button>
    </form>
  );
}

Edit this page

ProgressBar RangeCalendar