ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
      • Text
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Radio Group

yarn add @clayui/form

Radios provide users with different selection and activation tools.

  • Examples
  • API

Stable3.58.0CHANGELOGstorybook demos

  • Form.RadioGroup
  • Form.Radio

Form.RadioGroup

PropertyTypeRequiredDefaultDescription
children
Array< React.ReactElement<IRadioProps> | React.ReactElement<IToggleProps> >trueTakes either Radio or Toggle as a child.
defaultValue
React.ReactTextfalseProperty to set the default value (uncontrolled).
inline
booleanfalseFlag to indicate if radio elements should display inline.
name
stringfalseForm element `name` that is applied to each radio element.
onChange
InternalDispatch<React.ReactText>falseCallback function for whenever a radio element is selected (controlled).
onSelectedValueChangeDeprecated
InternalDispatch<React.ReactText>falseCallback function for whenever a radio element is selected. @deprecated since v3.51.0 - use `onChange` instead.
selectedValueDeprecated
React.ReactTextfalseThe value that corresponds to the selected radio element. Leave undefined if no option is selected. @deprecated since v3.51.0 - use `value` instead.
value
React.ReactTextfalseThe value property sets the current value (controlled).

Form.Radio

PropertyTypeRequiredDefaultDescription
containerProps
React.HTMLAttributes<HTMLDivElement>false{className: ''}Props for the outer most container element.
inline
booleanfalseFlag to indicate if radio elements should display inline.
label
React.ReactTextfalseText to describe for radio element.
value
React.ReactTexttrueValue provided if element is selected.

How can this be improved? Create an issue!