RadioGroup

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

#
Documentation

#
Usage

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

Input label

Option One

Option Two

Option Three

Description

Error

Label

Required

import type { ComponentPropsWithoutRef } from "react";
 
import { Field, RadioGroup, RadioGroupItem } 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>
        <RadioGroupItem value="one">Option One</RadioGroupItem>
        <RadioGroupItem value="two">Option Two</RadioGroupItem>
        <RadioGroupItem value="three">Option Three</RadioGroupItem>
      </RadioGroup>
    </Field>
  );
}

#
Label

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

Option Two

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

#
Disabled state

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

Option One

Option Two

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

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

Option One

Option Two

Option Three

import { RadioGroup, RadioGroupItem } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup>
      <RadioGroupItem defaultChecked disabled value="one">
        Option One
      </RadioGroupItem>
      <RadioGroupItem disabled value="two">
        Option Two
      </RadioGroupItem>
      <RadioGroupItem value="three">Option Three</RadioGroupItem>
    </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.

Option One

Option Two

Option Three

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

#
Description

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

Option OneHelper Text

Option Two

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

#
Props

#
`RadioGroup`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
defaultValue	`string`
dir	`"ltr" \| "rtl"`
disabled	`false \| true`
loop	`false \| true`
name	`string`
onValueChange	`(value: string) => void`
orientation	`"horizontal" \| "vertical"`
required	`false \| true`
value	`string`

#
`RadioGroupItem`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
checked	`false \| true`
description	`ReactNode`
required	`false \| true`
value*	`string`

#
Changelog

#
0.1.0

Added component

Input SearchInput