Radio Group

A group of options where no more than one option can be selected at a time.

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}>
      <RadioGroup.Option label="Option" value="86436d57" />
      <RadioGroup.Option label="Option" value="8a472209" />
      <RadioGroup.Option label="Option" value="ae45b79b" />
    </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

—

Hnadler called when a different option is selected.

This is a Radix Radio Group Root component. Find its full list of properties by visiting their docs.

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.


View code

Horizontal


View code

Label and help text

Use label and helpText props for additional information.


View code

Error

Use error and helpText props for validating the entire group.


View code

Disabled


View code