Zaidan

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Installation

CLI

npx shadcn@latest add @zaidan/radio-group

pnpx shadcn add @zaidan/radio-group

yarn dlx shadcn@latest add @zaidan/radio-group

bunx shadcn@latest add @zaidan/radio-group

Manual

Install the following dependencies:

npm i @kobalte/core

pnpm add @kobalte/core

yarn add @kobalte/core

bun add @kobalte/core

Copy and paste the following code into your project.

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import {
3
  Item,
4
  ItemIndicator,
5
  ItemInput,
6
  type RadioGroupItemProps as RadioGroupItemPrimitiveProps,
7
  RadioGroup as RadioGroupRoot,
8
  type RadioGroupRootProps,
9
} from "@kobalte/core/radio-group";
10
import { Circle } from "lucide-solid";
11
import { type ComponentProps, splitProps, type ValidComponent } from "solid-js";
12

13
import { cn } from "~/lib/utils";
14

15
type RadioGroupProps<T extends ValidComponent = "div"> = PolymorphicProps<
16
  T,
17
  RadioGroupRootProps<T>
18
> &
19
  Pick<ComponentProps<T>, "class" | "children">;
20

21
const RadioGroup = <T extends ValidComponent = "div">(props: RadioGroupProps<T>) => {
22
  const [local, others] = splitProps(props as RadioGroupProps, ["class"]);
23
  return (
24
    <RadioGroupRoot
25
      data-slot="radio-group"
26
      class={cn("z-radio-group w-full", local.class)}
27
      {...others}
28
    />
29
  );
30
};
31

32
type RadioGroupItemProps<T extends ValidComponent = "div"> = PolymorphicProps<
33
  T,
34
  RadioGroupItemPrimitiveProps<T>
35
> &
36
  Pick<ComponentProps<T>, "class" | "children">;
37

38
const RadioGroupItem = <T extends ValidComponent = "div">(props: RadioGroupItemProps<T>) => {
39
  const [local, others] = splitProps(props as RadioGroupItemProps, ["class", "id"]);
40
  return (
41
    <Item
42
      data-slot="radio-group-item"
43
      class={cn(
44
        "group/radio-group-item peer relative z-radio-group-item aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
45
        local.class,
46
      )}
47
      {...others}
48
    >
49
      <ItemInput data-slot="radio-group-item-input" class="peer sr-only" id={local.id} />
50
      <ItemIndicator data-slot="radio-group-indicator" class="z-radio-group-indicator">
51
        <Circle class="z-radio-group-indicator-icon" />
52
      </ItemIndicator>
53
    </Item>
54
  );
55
};
56

57
export { RadioGroup, RadioGroupItem };

Examples

Here are the source code of all the examples from the preview page:

Basic

import {
  Field,
  FieldLabel,
} from "~/components/ui/field";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";

function RadioGroupBasic() {
  return (
    <Example title="Basic">
      <RadioGroup defaultValue="comfortable">
        <Field orientation="horizontal">
          <RadioGroupItem value="default" id="r1" />
          <FieldLabel for="r1" class="font-normal">
            Default
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="comfortable" id="r2" />
          <FieldLabel for="r2" class="font-normal">
            Comfortable
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="compact" id="r3" />
          <FieldLabel for="r3" class="font-normal">
            Compact
          </FieldLabel>
        </Field>
      </RadioGroup>
    </Example>
  );
}

With Descriptions

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "~/components/ui/field";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";

function RadioGroupWithDescriptions() {
  return (
    <Example title="With Descriptions">
      <RadioGroup defaultValue="plus">
        <FieldLabel for="plus-plan">
          <Field orientation="horizontal">
            <FieldContent>
              <div class="font-medium">Plus</div>
              <FieldDescription>For individuals and small teams</FieldDescription>
            </FieldContent>
            <RadioGroupItem value="plus" id="plus-plan" />
          </Field>
        </FieldLabel>
        <FieldLabel for="pro-plan">
          <Field orientation="horizontal">
            <FieldContent>
              <div class="font-medium">Pro</div>
              <FieldDescription>For growing businesses</FieldDescription>
            </FieldContent>
            <RadioGroupItem value="pro" id="pro-plan" />
          </Field>
        </FieldLabel>
        <FieldLabel for="enterprise-plan">
          <Field orientation="horizontal">
            <FieldContent>
              <div class="font-medium">Enterprise</div>
              <FieldDescription>For large teams and enterprises</FieldDescription>
            </FieldContent>
            <RadioGroupItem value="enterprise" id="enterprise-plan" />
          </Field>
        </FieldLabel>
      </RadioGroup>
    </Example>
  );
}

With FieldSet

import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "~/components/ui/field";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";

function RadioGroupWithFieldSet() {
  return (
    <Example title="With FieldSet">
      <FieldSet>
        <FieldLegend>Battery Level</FieldLegend>
        <FieldDescription>Choose your preferred battery level.</FieldDescription>
        <RadioGroup defaultValue="medium">
          <Field orientation="horizontal">
            <RadioGroupItem value="high" id="battery-high" />
            <FieldLabel for="battery-high" class="font-normal">
              High
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <RadioGroupItem value="medium" id="battery-medium" />
            <FieldLabel for="battery-medium" class="font-normal">
              Medium
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <RadioGroupItem value="low" id="battery-low" />
            <FieldLabel for="battery-low" class="font-normal">
              Low
            </FieldLabel>
          </Field>
        </RadioGroup>
      </FieldSet>
    </Example>
  );
}

Grid Layout

import {
  Field,
  FieldLabel,
} from "~/components/ui/field";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";

function RadioGroupGrid() {
  return (
    <Example title="Grid Layout">
      <RadioGroup defaultValue="medium" class="grid grid-cols-2 gap-2">
        <FieldLabel for="size-small">
          <Field orientation="horizontal">
            <RadioGroupItem value="small" id="size-small" />
            <div class="font-medium">Small</div>
          </Field>
        </FieldLabel>
        <FieldLabel for="size-medium">
          <Field orientation="horizontal">
            <RadioGroupItem value="medium" id="size-medium" />
            <div class="font-medium">Medium</div>
          </Field>
        </FieldLabel>
        <FieldLabel for="size-large">
          <Field orientation="horizontal">
            <RadioGroupItem value="large" id="size-large" />
            <div class="font-medium">Large</div>
          </Field>
        </FieldLabel>
        <FieldLabel for="size-xlarge">
          <Field orientation="horizontal">
            <RadioGroupItem value="xlarge" id="size-xlarge" />
            <div class="font-medium">X-Large</div>
          </Field>
        </FieldLabel>
      </RadioGroup>
    </Example>
  );
}

Disabled

import {
  Field,
  FieldLabel,
} from "~/components/ui/field";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";

function RadioGroupDisabled() {
  return (
    <Example title="Disabled">
      <RadioGroup defaultValue="option2" disabled>
        <Field orientation="horizontal">
          <RadioGroupItem value="option1" id="disabled-1" />
          <FieldLabel for="disabled-1" class="font-normal">
            Option 1
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="option2" id="disabled-2" />
          <FieldLabel for="disabled-2" class="font-normal">
            Option 2
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem value="option3" id="disabled-3" />
          <FieldLabel for="disabled-3" class="font-normal">
            Option 3
          </FieldLabel>
        </Field>
      </RadioGroup>
    </Example>
  );
}

Invalid

import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "~/components/ui/field";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";

function RadioGroupInvalid() {
  return (
    <Example title="Invalid">
      <FieldSet>
        <FieldLegend>Notification Preferences</FieldLegend>
        <FieldDescription>Choose how you want to receive notifications.</FieldDescription>
        <RadioGroup defaultValue="email">
          <Field orientation="horizontal" data-invalid>
            <RadioGroupItem value="email" id="invalid-email" aria-invalid />
            <FieldLabel for="invalid-email" class="font-normal">
              Email only
            </FieldLabel>
          </Field>
          <Field orientation="horizontal" data-invalid>
            <RadioGroupItem value="sms" id="invalid-sms" aria-invalid />
            <FieldLabel for="invalid-sms" class="font-normal">
              SMS only
            </FieldLabel>
          </Field>
          <Field orientation="horizontal" data-invalid>
            <RadioGroupItem value="both" id="invalid-both" aria-invalid />
            <FieldLabel for="invalid-both" class="font-normal">
              Both Email & SMS
            </FieldLabel>
          </Field>
        </RadioGroup>
      </FieldSet>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.