Overview

A set of selectable buttons - where only one element can be selected at a time.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Radio, RadioItem } from '@inpulse-ui/radio';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.string().optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Radio name="field">
        <div className="flex items-center space-x-2">
          <RadioItem value="default" id="default" />
          <Label for="default">Default</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="comfortable" id="comfortable" />
          <Label for="comfortable">Comfortable</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="compact" id="compact" />
          <Label for="compact">Compact</Label>
        </div>
      </Radio>
    </Form>
  );
}

About

This component is an expansion of the Radio Group developed and maintained by Radix UI.

By default, it presents a smooth animation on selection toggle.

Installation

pnpm

pnpm add @inpulse-ui/radio

bun

bun add @inpulse-ui/radio

yarn

yarn add @inpulse-ui/radio

npm

npm install @inpulse-ui/radio

API Reference

Root

Element that groups all radio buttons.

Prop	Type	Default Value	Required
asChild	boolean	false	No
defaultValue	string	-	No
dir	enum	ltrrtl	No
disabled	boolean	-	No
loop	boolean	true	No
name	string	-	Yes
onChange	function	-	No
orientation	enum	horizontalverticalundefined	No
required	boolean	-	No
value	string	-	No

Attribute	Value
[data-disabled]	Present when disabled
[data-state]	checkedunchecked

Item

An item, part of a group, that can be selected. An input will be rendered to ensure proper event propagation.

Prop	Type	Default Value	Required
asChild	boolean	false	No
disabled	boolean	false	No
id	string	-	No
mono	boolean	false	No
value	string	-	No

Attribute	Value
[data-disabled]	Present when disabled
[data-state]	checkedunchecked

Usage

Instantiate the component within a form context and set an appropriate name attribute, otherwise it won’t be rendered. The name attribute must be unique within the form for proper functionality.

Set a value prop for each RadioItem to define its unique value.

import { Radio, RadioItem } from '@inpulse-ui/radio';

<Form {...useFormProps}>
  <Radio name="field">
    <RadioItem value="option-1">Option 1</RadioItem>
    <RadioItem value="option-2">Option 2</RadioItem>
  </Radio>
</Form>

Examples

Default value

You can set a default value to be selected when the component is rendered. To do this, simply set the defaultValue property in Radio.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Radio, RadioItem } from '@inpulse-ui/radio';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.string().optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Radio name="field" defaultValue="default">
        <div className="flex items-center space-x-2">
          <RadioItem value="default" id="default" />
          <Label for="default">Default</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="comfortable" id="comfortable" />
          <Label for="comfortable">Comfortable</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="compact" id="compact" />
          <Label for="compact">Compact</Label>
        </div>
      </Radio>
    </Form>
  );
}

Disable items

You can disable a radio item individually by setting the disabled property to true directly on RadioItem.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Radio, RadioItem } from '@inpulse-ui/radio';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.string().optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Radio name="field">
        <div className="flex items-center space-x-2">
          <RadioItem value="default" id="default" disabled />
          <Label for="default">Default</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="comfortable" id="comfortable" />
          <Label for="comfortable">Comfortable</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="compact" id="compact" />
          <Label for="compact">Compact</Label>
        </div>
      </Radio>
    </Form>
  );
}

Or disable the entire group of radio buttons by setting the disabled property to true in Radio.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Radio, RadioItem } from '@inpulse-ui/radio';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.string().optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Radio name="field" disabled>
        <div className="flex items-center space-x-2">
          <RadioItem value="default" id="default" />
          <Label for="default">Default</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="comfortable" id="comfortable" />
          <Label for="comfortable">Comfortable</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="compact" id="compact" />
          <Label for="compact">Compact</Label>
        </div>
      </Radio>
    </Form>
  );
}

Colors

By default, Radio will be assigned the theme’s primary color when enabled. But you can customize this color through CSS classes. The class must be applied directly to RadioItem. This way, you have the freedom to define different colors for each item.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Radio, RadioItem } from '@inpulse-ui/radio';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.string().optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Radio name="field">
        <div className="flex items-center space-x-2">
          <RadioItem value="default" id="default" className="bg-red-500" />
          <Label for="default">Default</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="comfortable" id="comfortable" className="bg-orange-500" />
          <Label for="comfortable">Comfortable</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="compact" id="compact" className="bg-green-500" />
          <Label for="compact">Compact</Label>
        </div>
      </Radio>
    </Form>
  );
}

Adopt a monochromatic style for Radio by setting the mono property to true. This style will adapt to the system’s light and dark mode. The property must be applied directly to RadioItem.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Radio, RadioItem } from '@inpulse-ui/radio';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.string().optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Radio name="field">
        <div className="flex items-center space-x-2">
          <RadioItem value="default" id="default" mono />
          <Label for="default">Default</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="comfortable" id="comfortable" mono />
          <Label for="comfortable">Comfortable</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="compact" id="compact" mono />
          <Label for="compact">Compact</Label>
        </div>
      </Radio>
    </Form>
  );
}

Events

Use the onChange event to perform an action every time the value of the Radio is changed.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Radio, RadioItem } from '@inpulse-ui/radio';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.string().optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Radio name="field" onChange={(value) => console.log(value)}>
        <div className="flex items-center space-x-2">
          <RadioItem value="default" id="default" />
          <Label for="default">Default</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="comfortable" id="comfortable" />
          <Label for="comfortable">Comfortable</Label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioItem value="compact" id="compact" />
          <Label for="compact">Compact</Label>
        </div>
      </Radio>
    </Form>
  );
}