Radio Group

A group of options where no more than one option can be selected at a time.
Label
Properties
label
helpText
error
horizontal

Installation

Usage

Example
Source Code
"use client";

import React from "react";
import { RadioGroup } from "@/ui/components/RadioGroup";

function RadioGroupExample() {
  return (
    <RadioGroup
      label="Label"
      helpText=""
      error={false}
      horizontal={false}
      value=""
      onValueChange={(value: string) => {}}
    >
      <RadioGroup.Option label="Option" value="3e34f497" />
      <RadioGroup.Option label="Option" value="7f0a99f0" />
      <RadioGroup.Option label="Option" value="7e668858" />
    </RadioGroup>
  );
}

export default RadioGroupExample;

Props

Radio Group Props
Option Props
Prop
Type
Default value
Notes
label
string
"Label"
helpText
string
""
error
boolean
false
horizontal
boolean
false
children
React.ReactNode
value
string
Currently selected value.
onValueChange
(value: string) => void
Handler called when a different option is selected.

Examples

Basics

Each item component needs a value prop to represent the value of the option. Use value and onValueChange props on the group component to control the selected state.

Horizontal

Label and help text

Use label and helpText props for additional information.

Error

Use error and helpText props for validating the entire group.

Disabled