Radio Group

A group of options where no more than one option can be selected at a time.
Label
Properties
label
helpText
error
horizontal
Example
Source Code
Installation
"use client";

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

function RadioGroupExample() {
  return (
    <RadioGroup
      label="Label"
      helpText=""
      error={false}
      horizontal={false}
      value=""
      onValueChange={(value: string) => {}}
    >
      <RadioGroup.Option label="Option" value="e829a2ef" />
      <RadioGroup.Option label="Option" value="5c0b610f" />
      <RadioGroup.Option label="Option" value="34e4af29" />
    </RadioGroup>
  );
}

export default RadioGroupExample;

Props

Radio Group
Option
Prop
Type
Default
Additional info
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