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
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).
onSelectedValueChange
InternalDispatch<React.ReactText> | undefined
Callback function for whenever a radio element is selected.
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
ElementRadio
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>> | nullContributors
Last edited May 11, 2025 at 5:57:01 PM
Table of Contents