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.

Default

Comfortable

Compact

import { styled } from "styled-system/jsx";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <styled.div css={{ display: "flex", alignItems: "center", gap: "2" }}>
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </styled.div>
      <styled.div css={{ display: "flex", alignItems: "center", gap: "2" }}>
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </styled.div>
      <styled.div css={{ display: "flex", alignItems: "center", gap: "2" }}>
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </styled.div>
    </RadioGroup>
  );
}

Installation

npx nore-ui-cli@latest add radio-group

Usage

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

<RadioGroup defaultValue="option-one">
  <styled.div css={{ display: "flex", alignItems: "center", spaceX: "2" }}>
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </styled.div>
  <styled.div css={{ display: "flex", alignItems: "center", spaceX: "2" }}>
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </styled.div>
</RadioGroup>

Examples

Form

"use client";

import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { styled } from "styled-system/jsx";
import { z } from "zod";
import { toast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

const formSchema = z.object({
  type: z.enum(["all", "mentions", "none"], {
    required_error: "You need to select a notification type.",
  }),
});

type FormSchema = z.infer<typeof formSchema>;

export default function RadioGroupForm() {
  const form = useForm<FormSchema>({
    resolver: zodResolver(formSchema),
  });

  const onSubmit = form.handleSubmit((data) => {
    toast({
      title: "You submitted the following values:",
      description: (
        <styled.pre
          css={{ mt: "2", w: "340px", rounded: "md", bg: "slate.950", p: "4", borderWidth: "1px" }}
        >
          <styled.code css={{ color: "white" }}>{JSON.stringify(data, null, 2)}</styled.code>
        </styled.pre>
      ),
    });
  });

  return (
    <styled.form onSubmit={onSubmit} css={{ w: "2/3", spaceY: "6" }}>
      <Controller
        control={form.control}
        name="type"
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid} css={{ spaceY: "3" }}>
            <FieldLabel>Notify me about...</FieldLabel>
            <RadioGroup
              onValueChange={field.onChange}
              defaultValue={field.value}
              css={{ display: "flex", flexDir: "column", spaceY: "1" }}
            >
              <Field css={{ display: "flex", alignItems: "center", gap: "3", spaceY: "0" }}>
                <RadioGroupItem value="all" />
                <FieldLabel css={{ fontWeight: "normal" }}>All new messages</FieldLabel>
              </Field>
              <Field css={{ display: "flex", alignItems: "center", gap: "3", spaceY: "0" }}>
                <RadioGroupItem value="mentions" />
                <FieldLabel css={{ fontWeight: "normal" }}>Direct messages and mentions</FieldLabel>
              </Field>
              <Field css={{ display: "flex", alignItems: "center", gap: "3", spaceY: "0" }}>
                <RadioGroupItem value="none" />
                <FieldLabel css={{ fontWeight: "normal" }}>Nothing</FieldLabel>
              </Field>
            </RadioGroup>
            <FieldError>{fieldState.error?.message}</FieldError>
          </Field>
        )}
      />
      <Button type="submit">Submit</Button>
    </styled.form>
  );
}