ComponentsRadioGroup

RadioGroup

Basic control to allow selecting only one item from a set.

#

Documentation

#

Usage

Use RadioGroup and Radio components together to create sets of radio buttons.

import type { ComponentPropsWithoutRef } from "react";
 
import { Field, Radio, RadioGroup } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <RadioGroup name="usage">
        <Radio value="one">Option One</Radio>
        <Radio value="two">Option Two</Radio>
        <Radio value="three">Option Three</Radio>
      </RadioGroup>
    </Field>
  );
}

#

Label

The children prop on Radio is used as the label of the radio control.

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="label-usage">
      <Radio value="one" />
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

#

Disabled state

Enable the disabled prop on the RadioGroup to toggle the disabled state of all the radio controls.

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup disabled name="disabled-group-usage" value="one">
      <Radio value="one">Option One</Radio>
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

You can also enable the disabled prop on each Radio to toggle the disabled state of each radio control.

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="disabled-usage">
      <Radio defaultChecked value="one">
        Option One
      </Radio>
      <Radio disabled value="two">
        Option Two
      </Radio>
      <Radio value="three">Option Three</Radio>
    </RadioGroup>
  );
}

#

Controlled

Use the value and defaultValue props on RadioGroup to toggle between controlled and uncontrolled usage. And combine it with onValueChange to listen for changes to the value.

import { Button, Flex, Radio, RadioGroup } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Flex>
      <RadioGroup
        name="controlled-usage"
        onValueChange={setValue}
        value={value}
      >
        <Radio value="one">Option One</Radio>
        <Radio value="two">Option Two</Radio>
        <Radio value="three">Option Three</Radio>
      </RadioGroup>
 
      <Button disabled={!value} onClick={() => setValue("")}>
        Reset
      </Button>
    </Flex>
  );
}

#

Description

Use the description prop to add helper text after the label.

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="description-usage">
      <Radio description="Helper Text" value="one">
        Option One
      </Radio>
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

#

Related

Checkbox

Basic control to allow selecting one or more items from a set.

Switch

Control to allow toggling between checked and not checked state.

#

Props

#

RadioGroup

Supports all Box props in addition to its own. Renders a <div> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

className

string

defaultValue

string

disabled

false | true

name

string

onBlur

FocusEventHandler<HTMLInputElement>

onChange

ChangeEventHandler<HTMLInputElement>

onValueChange

(value: string) => void

value

string

#

Radio

Supports all Box props in addition to its own. Renders a <div> element but forwards all props to a hidden <input> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

className

string

description

Add helper text after the label.

ReactNode

onCheckedChange

(checked: boolean) => void

#

Changelog

#

0.2.0

  • Renamed RadioGroupItem to Radio

#

0.1.0

  • Added component
ProgressSearchInput