RadioGroup

The RadioGroup component is a form control that allows users to select a single option from a set of choices, with support for various styles and states.

Basic Usage

import { RadioGroup, ThemeProvider } from "@carton-org/react-neumorphism";
import { useState } from "react";

const MyComponent = () => {
  const [value, setValue] = useState("option1");

  const items = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" },
  ];

  return (
    <RadioGroup
      items={items}
      name="options"
      value={value}
      onChange={setValue}
    />
  );
};

Live Example

Option 1

Option 2

Option 3

Props

Name	Type	Description	Required	Default Value
id	string	Unique identifier for the radio group	No	-
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the radio buttons	No	"sm"
items	Array<{ id?: string, label: string, value: string, disabled?: boolean }>	Array of radio options to display	Yes	-
name	string	Name attribute for the radio group	Yes	-
value	string	Currently selected value	Yes	-
onChange	(value: string) => void	Callback function when selection changes	No	-
disabled	boolean	Whether the entire radio group is disabled	No	false
radioGroupContainerStyle	React.CSSProperties	Custom styles for the radio group container	No	-
radioContainerStyle	React.CSSProperties	Custom styles for individual radio containers	No	-
radioLabelStyle	React.CSSProperties	Custom styles for radio labels	No	-

Examples

Different Sizes

Small Size

Small Option 1

Small Option 2

Medium Size

Small Option 1

Small Option 2

Large Size

Small Option 1

Small Option 2

With Disabled Options

Option 1

Option 2 (Disabled)

Option 3

Disabled Group

Option 1

Option 2

Option 3