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

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

export default function App() {
  return (
    <Provider spritemap="/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