Skip to Content
ComponentsRadioGroup

RadioGroup

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

Source

#

Documentation

#

Usage

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

"use client";
 
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>
  );
}

#

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.

"use client";
 
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>
  );
}

#

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>
  );
}

#

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.

Select

Select a value from a list of options inside a dropdown menu.

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

The initial selected value in uncontrolled mode.

string

disabled

Whether the input is disabled and in read only mode.

false | true

name

The name of the form control elements. Will override any name specified on the inner Radio components.

string

onBlur

Handler for blur event forwarded to all inner Radio components.

Useful for integrating with third party form libraries.

FocusEventHandler<HTMLInputElement>

onChange

Handler for change event forwarded to all inner Radio components.

Useful for integrating with third party form libraries.

ChangeEventHandler<HTMLInputElement>

onValueChange

Handler that is called when the selected value changes.

(value: string) => void

value

The selected value in controlled mode.

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 secondary text after the label.

ReactNode

onCheckedChange

Handler that is called when the checked state changes.

(checked: boolean) => void

#

Changelog

#

0.2.0

  • Renamed RadioGroupItem to Radio

#

0.1.0

  • Added component
Last updated on
ProgressSearchInput