Radio Group

A set of radio buttons for selecting a single option from a list.

SSDHDDNVMe

import { Radio, RadioGroup } from '@ontoui/react';

<RadioGroup defaultValue="ssd">
  <label>
    <Radio value="ssd" />
    SSD
  </label>
  <label>
    <Radio value="hdd" />
    HDD
  </label>
</RadioGroup>;

Anatomy

Part	Description
RadioGroup	The root container that manages shared selection state.
Radio	An individual radio button. Must be placed inside RadioGroup.

Examples

Disabled

Disable all options by setting disabled on RadioGroup.

SSDHDD

<RadioGroup defaultValue="ssd" disabled>
  <label>
    <Radio value="ssd" />
    SSD
  </label>
</RadioGroup>

API Reference

RadioGroup

Prop	Type	Default
children?	ReactNode	—
id?	string	—
className?	string	—
name?	string	—
value?	string	—
defaultValue?	string	—
disabled?	boolean	—
readOnly?	boolean	—
required?	boolean	—
onValueChange?	(value: unknown, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void	—
ref?	Ref<HTMLDivElement>	—

Radio

Prop	Type	Default
id?	string	—
className?	string	—
value	string	—
disabled?	boolean	—
readOnly?	boolean	—
required?	boolean	—
nativeButton?	boolean	—
ref?	Ref<HTMLSpanElement>	—