Uiplex

Radio Component

A flexible radio button component with support for individual radios and radio groups.

Basic Usage

import { Radio } from 'uiplex';

const [selectedValue, setSelectedValue] = useState("option1");

<Radio
  name="basic"
  value="option1"
  label="Option 1"
  checked={selectedValue === "option1"}
  onChange={setSelectedValue}
/>
<Radio
  name="basic"
  value="option2"
  label="Option 2"
  checked={selectedValue === "option2"}
  onChange={setSelectedValue}
/>

Radio Group

import { RadioGroup } from 'uiplex';

const [groupValue, setGroupValue] = useState("option1");

<RadioGroup
  name="group"
  value={groupValue}
  onChange={setGroupValue}
  options={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
    { value: "option3", label: "Option 3" },
  ]}
/>

With Descriptions

<RadioGroup
  name="descriptions"
  value={groupValue}
  onChange={setGroupValue}
  options={[
    {
      value: "option1",
      label: "Free Plan",
      description: "Perfect for getting started",
    },
    {
      value: "option2",
      label: "Pro Plan",
      description: "Best for growing businesses",
    },
    {
      value: "option3",
      label: "Enterprise Plan",
      description: "For large organizations",
    },
  ]}
/>

Color Schemes

<RadioGroup
  name="colors"
  value={colorValue}
  onChange={setColorValue}
  colorScheme="blue"
  options={[...]}
/>

<RadioGroup
  name="colors2"
  value={colorValue}
  onChange={setColorValue}
  colorScheme="green"
  options={[...]}
/>

<RadioGroup
  name="colors3"
  value={colorValue}
  onChange={setColorValue}
  colorScheme="red"
  options={[...]}
/>

Sizes

Small

<RadioGroup size="sm" options={[...]} />

Medium (Default)

<RadioGroup size="md" options={[...]} />

Large

<RadioGroup size="lg" options={[...]} />

Horizontal Layout

<RadioGroup
  name="horizontal"
  value={groupValue}
  onChange={setGroupValue}
  orientation="horizontal"
  options={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
    { value: "option3", label: "Option 3" },
  ]}
/>

Disabled State

<RadioGroup
  name="disabled"
  value={groupValue}
  onChange={setGroupValue}
  disabled
  options={[
    { value: "option1", label: "Disabled Option 1" },
    { value: "option2", label: "Disabled Option 2" },
    { value: "option3", label: "Disabled Option 3" },
  ]}
/>

Individual Disabled Options

<RadioGroup
  name="individual-disabled"
  value={groupValue}
  onChange={setGroupValue}
  options={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2", disabled: true },
    { value: "option3", label: "Option 3" },
  ]}
/>

Props

Radio Props

PropTypeDefaultDescription
idstring-Unique identifier for the radio input
namestring-Name attribute for the radio input (required)
valuestring-Value of the radio option (required)
checkedbooleanfalseWhether the radio is selected
disabledbooleanfalseWhether the radio is disabled
labelstring-Label text for the radio option
descriptionstring-Description text below the label
size"sm" | "md" | "lg""md"Size variant of the radio
colorScheme"blue" | "green" | "red" | "yellow" | "purple" | "gray""blue"Color scheme for the radio
onChange(value: string) => void-Callback when radio selection changes
classNamestring""Additional CSS classes

RadioGroup Props

PropTypeDefaultDescription
namestring-Name attribute for the radio group (required)
valuestring-Currently selected value
optionsArray<{value: string, label?: string, description?: string, disabled?: boolean}>-Array of radio options (required)
disabledbooleanfalseWhether all radios in the group are disabled
size"sm" | "md" | "lg""md"Size variant for all radios in the group
colorScheme"blue" | "green" | "red" | "yellow" | "purple" | "gray""blue"Color scheme for all radios in the group
onChange(value: string) => void-Callback when selection changes
classNamestring""Additional CSS classes
orientation"horizontal" | "vertical""vertical"Layout direction of the radio group