Radio Group

Radios provide users with different selection and activation tools.

install	yarn add @clayui/form
version
use	`import {ClayRadio, ClayRadioGroup} from '@clayui/form';`

Table of Contents

Example
API Reference

Example

Open Sandbox

import {Provider} from '@clayui/core';
import {ClayRadio, ClayRadioGroup} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClayRadioGroup defaultValue="one" inline>
					<ClayRadio label="One" value="one" />
					<ClayRadio label="Two" value="two" />
					<ClayRadio label="Three" value="three" />
				</ClayRadioGroup>
			</div>
		</Provider>
	);
}

API Reference

RadioGroup

({ children, className, defaultValue, inline, name, onChange, onSelectedValueChange, selectedValue, value, ...otherProps }: IGroupProps) => JSX.Element

Parameters

Properties

children *

Array<React.ReactElement<IRadioProps & React.RefAttributes<HTMLInputElement>, string | React.JSXElementConstructor<any>> | React.ReactElement<IToggleProps & React.RefAttributes<HTMLLabelElement>, string | React.JSXElementConstructor<any>>>

Takes either Radio or Toggle as a child.

defaultValue

React.ReactText | undefined

Property to set the default value (uncontrolled).

inline

boolean | undefined

Flag to indicate if radio elements should display inline.

name

string | undefined

Form element name that is applied to each radio element.

onChange

InternalDispatch<React.ReactText> | undefined

Callback function for whenever a radio element is selected (controlled).

Deprecated

onSelectedValueChange

InternalDispatch<React.ReactText> | undefined

Callback function for whenever a radio element is selected.

Deprecated

selectedValue

React.ReactText | undefined

The value that corresponds to the selected radio element. Leave undefined if no option is selected.

value

React.ReactText | undefined

The value property sets the current value (controlled).

Returns

Element

Radio

React.ForwardRefExoticComponent<IRadioProps & React.RefAttributes<HTMLInputElement>>

Parameters

Properties

containerProps

React.HTMLAttributes<HTMLDivElement> | undefined

Props for the outer most container element.

inline

boolean | undefined

Flag to indicate if radio elements should display inline.

label

React.ReactText | undefined

Text to describe for radio element.

value *

React.ReactText

Value provided if element is selected.

Returns

ReactElement<any, string | JSXElementConstructor<any>> | null

Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Diego Nascimento, Krešimir Čoko

Last edited May 11, 2025 at 5:57:01 PM

Table of Contents

Example
API Reference