Skip to main contentSkip to search
Clay
  • 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
    • DropDown
    • Empty State
    • Focus Trap
    • 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
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Toggle Switch

Toggle provide users with different selection and activation tools.

installyarn add @clayui/form
version3.104.0
  • Examples
  • Markup
  • API

Stable3.104.0View in LexiconCHANGELOGstorybook demos

  • Toggle
  • RadioGroup

Toggle

PropertyDescription
containerProps
React.HTMLAttributes<HTMLSpanElement>


The default value is {}
disabled
boolean
id
string
label
React.ReactText
onToggle
(val: boolean) => void
spritemap
string
symbol
{on: string; off: string}
toggled
boolean
type
'checkbox' | 'radio'


The default value is 'checkbox'
value
string
role


The default value is 'switch'

RadioGroup

PropertyDescription
children
Array< React.ReactElement<IRadioProps> | React.ReactElement<IToggleProps> >
Takes either Radio or Toggle as a child.
defaultValue
React.ReactText
Property to set the default value (uncontrolled).
inline
boolean
Flag to indicate if radio elements should display inline.
name
string
Form element name that is applied to each radio element.
onChange
InternalDispatch<React.ReactText>
Callback function for whenever a radio element is selected (controlled).
onSelectedValueChangeDeprecated
InternalDispatch<React.ReactText>
Callback function for whenever a radio element is selected. @deprecated since v3.51.0 - use onChange instead.
selectedValueDeprecated
React.ReactText
The 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.ReactText
The value property sets the current value (controlled).

How can this be improved? Create an issue!