Skip to main content

RadioGroup

Storybook​

Go to Story

RadioGroupProps​

Defined in: src/components/RadioGroup/RadioGroup.tsx:15

Extends​

  • Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, "value" | "onValueChange" | "defaultValue" | "onChange">

Type Parameters​

Type Parameter
T extends string

Properties​

PropertyTypeDescriptionOverridesInherited fromDefined in
asChild?boolean--Omit.asChildnode_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-primitive/dist/index.d.mts:8
name?string--Omit.namenode_modules/@radix-ui/react-radio-group/dist/index.d.mts:34
required?boolean--Omit.requirednode_modules/@radix-ui/react-radio-group/dist/index.d.mts:35
disabled?boolean--Omit.disablednode_modules/@radix-ui/react-radio-group/dist/index.d.mts:36
dir?Direction--Omit.dirnode_modules/@radix-ui/react-radio-group/dist/index.d.mts:37
orientation?"horizontal" | "vertical"--Omit.orientationnode_modules/@radix-ui/react-radio-group/dist/index.d.mts:38
loop?boolean--Omit.loopnode_modules/@radix-ui/react-radio-group/dist/index.d.mts:39
optionsobject[]Array of options to be displayed in the radio group.--src/components/RadioGroup/RadioGroup.tsx:23
value?TThe currently selected value.--src/components/RadioGroup/RadioGroup.tsx:27
onChange?(value) => voidCallback fired when the value changes. onChange name is used to keep compatibility with Field component.--src/components/RadioGroup/RadioGroup.tsx:33
defaultValue?TDefault value to be selected initially for uncontrolled usage.--src/components/RadioGroup/RadioGroup.tsx:37
direction?"row" | "column"Direction of the radio group. - row: Arranges radio buttons horizontally in a row with wrapping if necessary - column: Arranges radio buttons vertically in a column Default "column"--src/components/RadioGroup/RadioGroup.tsx:46
className?string-ButtonProps.className-src/components/RadioGroup/RadioGroup.tsx:47
key?Key | null--ButtonProps.keynode_modules/@types/react/index.d.ts:250
ref?Ref<HTMLDivElement>Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). See React Docs-Omit.refnode_modules/@types/react/index.d.ts:292
children?ReactNode--Omit.childrennode_modules/@types/react/index.d.ts:2230
dangerouslySetInnerHTML?object--Omit.dangerouslySetInnerHTMLnode_modules/@types/react/index.d.ts:2231
dangerouslySetInnerHTML.__htmlstring | TrustedHTML---node_modules/@types/react/index.d.ts:2234
onCopy?ClipboardEventHandler<HTMLDivElement>--Omit.onCopynode_modules/@types/react/index.d.ts:2238
onCopyCapture?ClipboardEventHandler<HTMLDivElement>--Omit.onCopyCapturenode_modules/@types/react/index.d.ts:2239
onCut?ClipboardEventHandler<HTMLDivElement>--Omit.onCutnode_modules/@types/react/index.d.ts:2240
onCutCapture?ClipboardEventHandler<HTMLDivElement>--Omit.onCutCapturenode_modules/@types/react/index.d.ts:2241
onPaste?ClipboardEventHandler<HTMLDivElement>--Omit.onPastenode_modules/@types/react/index.d.ts:2242
onPasteCapture?ClipboardEventHandler<HTMLDivElement>--Omit.onPasteCapturenode_modules/@types/react/index.d.ts:2243
onCompositionEnd?CompositionEventHandler<HTMLDivElement>--Omit.onCompositionEndnode_modules/@types/react/index.d.ts:2246
onCompositionEndCapture?CompositionEventHandler<HTMLDivElement>--Omit.onCompositionEndCapturenode_modules/@types/react/index.d.ts:2247
onCompositionStart?CompositionEventHandler<HTMLDivElement>--Omit.onCompositionStartnode_modules/@types/react/index.d.ts:2248
onCompositionStartCapture?CompositionEventHandler<HTMLDivElement>--Omit.onCompositionStartCapturenode_modules/@types/react/index.d.ts:2249
onCompositionUpdate?CompositionEventHandler<HTMLDivElement>--Omit.onCompositionUpdatenode_modules/@types/react/index.d.ts:2250
onCompositionUpdateCapture?CompositionEventHandler<HTMLDivElement>--Omit.onCompositionUpdateCapturenode_modules/@types/react/index.d.ts:2251
onFocus?FocusEventHandler<HTMLDivElement>--Omit.onFocusnode_modules/@types/react/index.d.ts:2254
onFocusCapture?FocusEventHandler<HTMLDivElement>--Omit.onFocusCapturenode_modules/@types/react/index.d.ts:2255
onBlur?FocusEventHandler<HTMLDivElement>--Omit.onBlurnode_modules/@types/react/index.d.ts:2256
onBlurCapture?FocusEventHandler<HTMLDivElement>--Omit.onBlurCapturenode_modules/@types/react/index.d.ts:2257
onChangeCapture?FormEventHandler<HTMLDivElement>--Omit.onChangeCapturenode_modules/@types/react/index.d.ts:2261
onBeforeInput?InputEventHandler<HTMLDivElement>--Omit.onBeforeInputnode_modules/@types/react/index.d.ts:2262
onBeforeInputCapture?FormEventHandler<HTMLDivElement>--Omit.onBeforeInputCapturenode_modules/@types/react/index.d.ts:2263
onInput?FormEventHandler<HTMLDivElement>--Omit.onInputnode_modules/@types/react/index.d.ts:2264
onInputCapture?FormEventHandler<HTMLDivElement>--Omit.onInputCapturenode_modules/@types/react/index.d.ts:2265
onReset?FormEventHandler<HTMLDivElement>--Omit.onResetnode_modules/@types/react/index.d.ts:2266
onResetCapture?FormEventHandler<HTMLDivElement>--Omit.onResetCapturenode_modules/@types/react/index.d.ts:2267
onSubmit?FormEventHandler<HTMLDivElement>--Omit.onSubmitnode_modules/@types/react/index.d.ts:2268
onSubmitCapture?FormEventHandler<HTMLDivElement>--Omit.onSubmitCapturenode_modules/@types/react/index.d.ts:2269
onInvalid?FormEventHandler<HTMLDivElement>--Omit.onInvalidnode_modules/@types/react/index.d.ts:2270
onInvalidCapture?FormEventHandler<HTMLDivElement>--Omit.onInvalidCapturenode_modules/@types/react/index.d.ts:2271
onLoad?ReactEventHandler<HTMLDivElement>--Omit.onLoadnode_modules/@types/react/index.d.ts:2274
onLoadCapture?ReactEventHandler<HTMLDivElement>--Omit.onLoadCapturenode_modules/@types/react/index.d.ts:2275
onError?ReactEventHandler<HTMLDivElement>--Omit.onErrornode_modules/@types/react/index.d.ts:2276
onErrorCapture?ReactEventHandler<HTMLDivElement>--Omit.onErrorCapturenode_modules/@types/react/index.d.ts:2277
onKeyDown?KeyboardEventHandler<HTMLDivElement>--Omit.onKeyDownnode_modules/@types/react/index.d.ts:2280
onKeyDownCapture?KeyboardEventHandler<HTMLDivElement>--Omit.onKeyDownCapturenode_modules/@types/react/index.d.ts:2281
onKeyPress?KeyboardEventHandler<HTMLDivElement>Deprecated Use onKeyUp or onKeyDown instead-Omit.onKeyPressnode_modules/@types/react/index.d.ts:2283
onKeyPressCapture?KeyboardEventHandler<HTMLDivElement>Deprecated Use onKeyUpCapture or onKeyDownCapture instead-Omit.onKeyPressCapturenode_modules/@types/react/index.d.ts:2285
onKeyUp?KeyboardEventHandler<HTMLDivElement>--Omit.onKeyUpnode_modules/@types/react/index.d.ts:2286
onKeyUpCapture?KeyboardEventHandler<HTMLDivElement>--Omit.onKeyUpCapturenode_modules/@types/react/index.d.ts:2287
onAbort?ReactEventHandler<HTMLDivElement>--Omit.onAbortnode_modules/@types/react/index.d.ts:2290
onAbortCapture?ReactEventHandler<HTMLDivElement>--Omit.onAbortCapturenode_modules/@types/react/index.d.ts:2291
onCanPlay?ReactEventHandler<HTMLDivElement>--Omit.onCanPlaynode_modules/@types/react/index.d.ts:2292
onCanPlayCapture?ReactEventHandler<HTMLDivElement>--Omit.onCanPlayCapturenode_modules/@types/react/index.d.ts:2293
onCanPlayThrough?ReactEventHandler<HTMLDivElement>--Omit.onCanPlayThroughnode_modules/@types/react/index.d.ts:2294
onCanPlayThroughCapture?ReactEventHandler<HTMLDivElement>--Omit.onCanPlayThroughCapturenode_modules/@types/react/index.d.ts:2295
onDurationChange?ReactEventHandler<HTMLDivElement>--Omit.onDurationChangenode_modules/@types/react/index.d.ts:2296
onDurationChangeCapture?ReactEventHandler<HTMLDivElement>--Omit.onDurationChangeCapturenode_modules/@types/react/index.d.ts:2297
onEmptied?ReactEventHandler<HTMLDivElement>--Omit.onEmptiednode_modules/@types/react/index.d.ts:2298
onEmptiedCapture?ReactEventHandler<HTMLDivElement>--Omit.onEmptiedCapturenode_modules/@types/react/index.d.ts:2299
onEncrypted?ReactEventHandler<HTMLDivElement>--Omit.onEncryptednode_modules/@types/react/index.d.ts:2300
onEncryptedCapture?ReactEventHandler<HTMLDivElement>--Omit.onEncryptedCapturenode_modules/@types/react/index.d.ts:2301
onEnded?ReactEventHandler<HTMLDivElement>--Omit.onEndednode_modules/@types/react/index.d.ts:2302
onEndedCapture?ReactEventHandler<HTMLDivElement>--Omit.onEndedCapturenode_modules/@types/react/index.d.ts:2303
onLoadedData?ReactEventHandler<HTMLDivElement>--Omit.onLoadedDatanode_modules/@types/react/index.d.ts:2304
onLoadedDataCapture?ReactEventHandler<HTMLDivElement>--Omit.onLoadedDataCapturenode_modules/@types/react/index.d.ts:2305
onLoadedMetadata?ReactEventHandler<HTMLDivElement>--Omit.onLoadedMetadatanode_modules/@types/react/index.d.ts:2306
onLoadedMetadataCapture?ReactEventHandler<HTMLDivElement>--Omit.onLoadedMetadataCapturenode_modules/@types/react/index.d.ts:2307
onLoadStart?ReactEventHandler<HTMLDivElement>--Omit.onLoadStartnode_modules/@types/react/index.d.ts:2308
onLoadStartCapture?ReactEventHandler<HTMLDivElement>--Omit.onLoadStartCapturenode_modules/@types/react/index.d.ts:2309
onPause?ReactEventHandler<HTMLDivElement>--Omit.onPausenode_modules/@types/react/index.d.ts:2310
onPauseCapture?ReactEventHandler<HTMLDivElement>--Omit.onPauseCapturenode_modules/@types/react/index.d.ts:2311
onPlay?ReactEventHandler<HTMLDivElement>--Omit.onPlaynode_modules/@types/react/index.d.ts:2312
onPlayCapture?ReactEventHandler<HTMLDivElement>--Omit.onPlayCapturenode_modules/@types/react/index.d.ts:2313
onPlaying?ReactEventHandler<HTMLDivElement>--Omit.onPlayingnode_modules/@types/react/index.d.ts:2314
onPlayingCapture?ReactEventHandler<HTMLDivElement>--Omit.onPlayingCapturenode_modules/@types/react/index.d.ts:2315
onProgress?ReactEventHandler<HTMLDivElement>--Omit.onProgressnode_modules/@types/react/index.d.ts:2316
onProgressCapture?ReactEventHandler<HTMLDivElement>--Omit.onProgressCapturenode_modules/@types/react/index.d.ts:2317
onRateChange?ReactEventHandler<HTMLDivElement>--Omit.onRateChangenode_modules/@types/react/index.d.ts:2318
onRateChangeCapture?ReactEventHandler<HTMLDivElement>--Omit.onRateChangeCapturenode_modules/@types/react/index.d.ts:2319
onSeeked?ReactEventHandler<HTMLDivElement>--Omit.onSeekednode_modules/@types/react/index.d.ts:2320
onSeekedCapture?ReactEventHandler<HTMLDivElement>--Omit.onSeekedCapturenode_modules/@types/react/index.d.ts:2321
onSeeking?ReactEventHandler<HTMLDivElement>--Omit.onSeekingnode_modules/@types/react/index.d.ts:2322
onSeekingCapture?ReactEventHandler<HTMLDivElement>--Omit.onSeekingCapturenode_modules/@types/react/index.d.ts:2323
onStalled?ReactEventHandler<HTMLDivElement>--Omit.onStallednode_modules/@types/react/index.d.ts:2324
onStalledCapture?ReactEventHandler<HTMLDivElement>--Omit.onStalledCapturenode_modules/@types/react/index.d.ts:2325
onSuspend?ReactEventHandler<HTMLDivElement>--Omit.onSuspendnode_modules/@types/react/index.d.ts:2326
onSuspendCapture?ReactEventHandler<HTMLDivElement>--Omit.onSuspendCapturenode_modules/@types/react/index.d.ts:2327
onTimeUpdate?ReactEventHandler<HTMLDivElement>--Omit.onTimeUpdatenode_modules/@types/react/index.d.ts:2328
onTimeUpdateCapture?ReactEventHandler<HTMLDivElement>--Omit.onTimeUpdateCapturenode_modules/@types/react/index.d.ts:2329
onVolumeChange?ReactEventHandler<HTMLDivElement>--Omit.onVolumeChangenode_modules/@types/react/index.d.ts:2330
onVolumeChangeCapture?ReactEventHandler<HTMLDivElement>--Omit.onVolumeChangeCapturenode_modules/@types/react/index.d.ts:2331
onWaiting?ReactEventHandler<HTMLDivElement>--Omit.onWaitingnode_modules/@types/react/index.d.ts:2332
onWaitingCapture?ReactEventHandler<HTMLDivElement>--Omit.onWaitingCapturenode_modules/@types/react/index.d.ts:2333
onAuxClick?MouseEventHandler<HTMLDivElement>--Omit.onAuxClicknode_modules/@types/react/index.d.ts:2336
onAuxClickCapture?MouseEventHandler<HTMLDivElement>--Omit.onAuxClickCapturenode_modules/@types/react/index.d.ts:2337
onClick?MouseEventHandler<HTMLDivElement>--Omit.onClicknode_modules/@types/react/index.d.ts:2338
onClickCapture?MouseEventHandler<HTMLDivElement>--Omit.onClickCapturenode_modules/@types/react/index.d.ts:2339
onContextMenu?MouseEventHandler<HTMLDivElement>--Omit.onContextMenunode_modules/@types/react/index.d.ts:2340
onContextMenuCapture?MouseEventHandler<HTMLDivElement>--Omit.onContextMenuCapturenode_modules/@types/react/index.d.ts:2341
onDoubleClick?MouseEventHandler<HTMLDivElement>--Omit.onDoubleClicknode_modules/@types/react/index.d.ts:2342
onDoubleClickCapture?MouseEventHandler<HTMLDivElement>--Omit.onDoubleClickCapturenode_modules/@types/react/index.d.ts:2343
onDrag?DragEventHandler<HTMLDivElement>--Omit.onDragnode_modules/@types/react/index.d.ts:2344
onDragCapture?DragEventHandler<HTMLDivElement>--Omit.onDragCapturenode_modules/@types/react/index.d.ts:2345
onDragEnd?DragEventHandler<HTMLDivElement>--Omit.onDragEndnode_modules/@types/react/index.d.ts:2346
onDragEndCapture?DragEventHandler<HTMLDivElement>--Omit.onDragEndCapturenode_modules/@types/react/index.d.ts:2347
onDragEnter?DragEventHandler<HTMLDivElement>--Omit.onDragEnternode_modules/@types/react/index.d.ts:2348
onDragEnterCapture?DragEventHandler<HTMLDivElement>--Omit.onDragEnterCapturenode_modules/@types/react/index.d.ts:2349
onDragExit?DragEventHandler<HTMLDivElement>--Omit.onDragExitnode_modules/@types/react/index.d.ts:2350
onDragExitCapture?DragEventHandler<HTMLDivElement>--Omit.onDragExitCapturenode_modules/@types/react/index.d.ts:2351
onDragLeave?DragEventHandler<HTMLDivElement>--Omit.onDragLeavenode_modules/@types/react/index.d.ts:2352
onDragLeaveCapture?DragEventHandler<HTMLDivElement>--Omit.onDragLeaveCapturenode_modules/@types/react/index.d.ts:2353
onDragOver?DragEventHandler<HTMLDivElement>--Omit.onDragOvernode_modules/@types/react/index.d.ts:2354
onDragOverCapture?DragEventHandler<HTMLDivElement>--Omit.onDragOverCapturenode_modules/@types/react/index.d.ts:2355
onDragStart?DragEventHandler<HTMLDivElement>--Omit.onDragStartnode_modules/@types/react/index.d.ts:2356
onDragStartCapture?DragEventHandler<HTMLDivElement>--Omit.onDragStartCapturenode_modules/@types/react/index.d.ts:2357
onDrop?DragEventHandler<HTMLDivElement>--Omit.onDropnode_modules/@types/react/index.d.ts:2358
onDropCapture?DragEventHandler<HTMLDivElement>--Omit.onDropCapturenode_modules/@types/react/index.d.ts:2359
onMouseDown?MouseEventHandler<HTMLDivElement>--Omit.onMouseDownnode_modules/@types/react/index.d.ts:2360
onMouseDownCapture?MouseEventHandler<HTMLDivElement>--Omit.onMouseDownCapturenode_modules/@types/react/index.d.ts:2361
onMouseEnter?MouseEventHandler<HTMLDivElement>--Omit.onMouseEnternode_modules/@types/react/index.d.ts:2362
onMouseLeave?MouseEventHandler<HTMLDivElement>--Omit.onMouseLeavenode_modules/@types/react/index.d.ts:2363
onMouseMove?MouseEventHandler<HTMLDivElement>--Omit.onMouseMovenode_modules/@types/react/index.d.ts:2364
onMouseMoveCapture?MouseEventHandler<HTMLDivElement>--Omit.onMouseMoveCapturenode_modules/@types/react/index.d.ts:2365
onMouseOut?MouseEventHandler<HTMLDivElement>--Omit.onMouseOutnode_modules/@types/react/index.d.ts:2366
onMouseOutCapture?MouseEventHandler<HTMLDivElement>--Omit.onMouseOutCapturenode_modules/@types/react/index.d.ts:2367
onMouseOver?MouseEventHandler<HTMLDivElement>--Omit.onMouseOvernode_modules/@types/react/index.d.ts:2368
onMouseOverCapture?MouseEventHandler<HTMLDivElement>--Omit.onMouseOverCapturenode_modules/@types/react/index.d.ts:2369
onMouseUp?MouseEventHandler<HTMLDivElement>--Omit.onMouseUpnode_modules/@types/react/index.d.ts:2370
onMouseUpCapture?MouseEventHandler<HTMLDivElement>--Omit.onMouseUpCapturenode_modules/@types/react/index.d.ts:2371
onSelect?ReactEventHandler<HTMLDivElement>--Omit.onSelectnode_modules/@types/react/index.d.ts:2374
onSelectCapture?ReactEventHandler<HTMLDivElement>--Omit.onSelectCapturenode_modules/@types/react/index.d.ts:2375
onTouchCancel?TouchEventHandler<HTMLDivElement>--Omit.onTouchCancelnode_modules/@types/react/index.d.ts:2378
onTouchCancelCapture?TouchEventHandler<HTMLDivElement>--Omit.onTouchCancelCapturenode_modules/@types/react/index.d.ts:2379
onTouchEnd?TouchEventHandler<HTMLDivElement>--Omit.onTouchEndnode_modules/@types/react/index.d.ts:2380
onTouchEndCapture?TouchEventHandler<HTMLDivElement>--Omit.onTouchEndCapturenode_modules/@types/react/index.d.ts:2381
onTouchMove?TouchEventHandler<HTMLDivElement>--Omit.onTouchMovenode_modules/@types/react/index.d.ts:2382
onTouchMoveCapture?TouchEventHandler<HTMLDivElement>--Omit.onTouchMoveCapturenode_modules/@types/react/index.d.ts:2383
onTouchStart?TouchEventHandler<HTMLDivElement>--Omit.onTouchStartnode_modules/@types/react/index.d.ts:2384
onTouchStartCapture?TouchEventHandler<HTMLDivElement>--Omit.onTouchStartCapturenode_modules/@types/react/index.d.ts:2385
onPointerDown?PointerEventHandler<HTMLDivElement>--Omit.onPointerDownnode_modules/@types/react/index.d.ts:2388
onPointerDownCapture?PointerEventHandler<HTMLDivElement>--Omit.onPointerDownCapturenode_modules/@types/react/index.d.ts:2389
onPointerMove?PointerEventHandler<HTMLDivElement>--Omit.onPointerMovenode_modules/@types/react/index.d.ts:2390
onPointerMoveCapture?PointerEventHandler<HTMLDivElement>--Omit.onPointerMoveCapturenode_modules/@types/react/index.d.ts:2391
onPointerUp?PointerEventHandler<HTMLDivElement>--Omit.onPointerUpnode_modules/@types/react/index.d.ts:2392
onPointerUpCapture?PointerEventHandler<HTMLDivElement>--Omit.onPointerUpCapturenode_modules/@types/react/index.d.ts:2393
onPointerCancel?PointerEventHandler<HTMLDivElement>--Omit.onPointerCancelnode_modules/@types/react/index.d.ts:2394
onPointerCancelCapture?PointerEventHandler<HTMLDivElement>--Omit.onPointerCancelCapturenode_modules/@types/react/index.d.ts:2395
onPointerEnter?PointerEventHandler<HTMLDivElement>--Omit.onPointerEnternode_modules/@types/react/index.d.ts:2396
onPointerLeave?PointerEventHandler<HTMLDivElement>--Omit.onPointerLeavenode_modules/@types/react/index.d.ts:2397
onPointerOver?PointerEventHandler<HTMLDivElement>--Omit.onPointerOvernode_modules/@types/react/index.d.ts:2398
onPointerOverCapture?PointerEventHandler<HTMLDivElement>--Omit.onPointerOverCapturenode_modules/@types/react/index.d.ts:2399
onPointerOut?PointerEventHandler<HTMLDivElement>--Omit.onPointerOutnode_modules/@types/react/index.d.ts:2400
onPointerOutCapture?PointerEventHandler<HTMLDivElement>--Omit.onPointerOutCapturenode_modules/@types/react/index.d.ts:2401
onGotPointerCapture?PointerEventHandler<HTMLDivElement>--Omit.onGotPointerCapturenode_modules/@types/react/index.d.ts:2402
onGotPointerCaptureCapture?PointerEventHandler<HTMLDivElement>--Omit.onGotPointerCaptureCapturenode_modules/@types/react/index.d.ts:2403
onLostPointerCapture?PointerEventHandler<HTMLDivElement>--Omit.onLostPointerCapturenode_modules/@types/react/index.d.ts:2404
onLostPointerCaptureCapture?PointerEventHandler<HTMLDivElement>--Omit.onLostPointerCaptureCapturenode_modules/@types/react/index.d.ts:2405
onScroll?UIEventHandler<HTMLDivElement>--Omit.onScrollnode_modules/@types/react/index.d.ts:2408
onScrollCapture?UIEventHandler<HTMLDivElement>--Omit.onScrollCapturenode_modules/@types/react/index.d.ts:2409
onScrollEnd?UIEventHandler<HTMLDivElement>--Omit.onScrollEndnode_modules/@types/react/index.d.ts:2410
onScrollEndCapture?UIEventHandler<HTMLDivElement>--Omit.onScrollEndCapturenode_modules/@types/react/index.d.ts:2411
onWheel?WheelEventHandler<HTMLDivElement>--Omit.onWheelnode_modules/@types/react/index.d.ts:2414
onWheelCapture?WheelEventHandler<HTMLDivElement>--Omit.onWheelCapturenode_modules/@types/react/index.d.ts:2415
onAnimationStart?AnimationEventHandler<HTMLDivElement>--Omit.onAnimationStartnode_modules/@types/react/index.d.ts:2418
onAnimationStartCapture?AnimationEventHandler<HTMLDivElement>--Omit.onAnimationStartCapturenode_modules/@types/react/index.d.ts:2419
onAnimationEnd?AnimationEventHandler<HTMLDivElement>--Omit.onAnimationEndnode_modules/@types/react/index.d.ts:2420
onAnimationEndCapture?AnimationEventHandler<HTMLDivElement>--Omit.onAnimationEndCapturenode_modules/@types/react/index.d.ts:2421
onAnimationIteration?AnimationEventHandler<HTMLDivElement>--Omit.onAnimationIterationnode_modules/@types/react/index.d.ts:2422
onAnimationIterationCapture?AnimationEventHandler<HTMLDivElement>--Omit.onAnimationIterationCapturenode_modules/@types/react/index.d.ts:2423
onToggle?ToggleEventHandler<HTMLDivElement>--Omit.onTogglenode_modules/@types/react/index.d.ts:2426
onBeforeToggle?ToggleEventHandler<HTMLDivElement>--Omit.onBeforeTogglenode_modules/@types/react/index.d.ts:2427
onTransitionCancel?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionCancelnode_modules/@types/react/index.d.ts:2430
onTransitionCancelCapture?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionCancelCapturenode_modules/@types/react/index.d.ts:2431
onTransitionEnd?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionEndnode_modules/@types/react/index.d.ts:2432
onTransitionEndCapture?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionEndCapturenode_modules/@types/react/index.d.ts:2433
onTransitionRun?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionRunnode_modules/@types/react/index.d.ts:2434
onTransitionRunCapture?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionRunCapturenode_modules/@types/react/index.d.ts:2435
onTransitionStart?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionStartnode_modules/@types/react/index.d.ts:2436
onTransitionStartCapture?TransitionEventHandler<HTMLDivElement>--Omit.onTransitionStartCapturenode_modules/@types/react/index.d.ts:2437
aria-activedescendant?stringIdentifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.-ButtonProps.aria-activedescendantnode_modules/@types/react/index.d.ts:2454
aria-atomic?BooleanishIndicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.-ButtonProps.aria-atomicnode_modules/@types/react/index.d.ts:2456
aria-autocomplete?"none" | "list" | "inline" | "both"Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.-ButtonProps.aria-autocompletenode_modules/@types/react/index.d.ts:2461
aria-braillelabel?stringDefines a string value that labels the current element, which is intended to be converted into Braille. See aria-label.-ButtonProps.aria-braillelabelnode_modules/@types/react/index.d.ts:2467
aria-brailleroledescription?stringDefines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. See aria-roledescription.-ButtonProps.aria-brailleroledescriptionnode_modules/@types/react/index.d.ts:2472
aria-busy?Booleanish--ButtonProps.aria-busynode_modules/@types/react/index.d.ts:2473
aria-checked?boolean | "true" | "false" | "mixed"Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. See - aria-pressed - aria-selected.-ButtonProps.aria-checkednode_modules/@types/react/index.d.ts:2478
aria-colcount?numberDefines the total number of columns in a table, grid, or treegrid. See aria-colindex.-ButtonProps.aria-colcountnode_modules/@types/react/index.d.ts:2483
aria-colindex?numberDefines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. See - aria-colcount - aria-colspan.-ButtonProps.aria-colindexnode_modules/@types/react/index.d.ts:2488
aria-colindextext?stringDefines a human readable text alternative of aria-colindex. See aria-rowindextext.-ButtonProps.aria-colindextextnode_modules/@types/react/index.d.ts:2493
aria-colspan?numberDefines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. See - aria-colindex - aria-rowspan.-ButtonProps.aria-colspannode_modules/@types/react/index.d.ts:2498
aria-controls?stringIdentifies the element (or elements) whose contents or presence are controlled by the current element. See aria-owns.-ButtonProps.aria-controlsnode_modules/@types/react/index.d.ts:2503
aria-current?boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"Indicates the element that represents the current item within a container or set of related elements.-ButtonProps.aria-currentnode_modules/@types/react/index.d.ts:2505
aria-describedby?stringIdentifies the element (or elements) that describes the object. See aria-labelledby-ButtonProps.aria-describedbynode_modules/@types/react/index.d.ts:2510
aria-description?stringDefines a string value that describes or annotates the current element. See related aria-describedby.-ButtonProps.aria-descriptionnode_modules/@types/react/index.d.ts:2515
aria-details?stringIdentifies the element that provides a detailed, extended description for the object. See aria-describedby.-ButtonProps.aria-detailsnode_modules/@types/react/index.d.ts:2520
aria-disabled?BooleanishIndicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See - aria-hidden - aria-readonly.-ButtonProps.aria-disablednode_modules/@types/react/index.d.ts:2525
aria-dropeffect?"link" | "none" | "copy" | "execute" | "move" | "popup"Indicates what functions can be performed when a dragged object is released on the drop target. Deprecated in ARIA 1.1-ButtonProps.aria-dropeffectnode_modules/@types/react/index.d.ts:2530
aria-errormessage?stringIdentifies the element that provides an error message for the object. See - aria-invalid - aria-describedby.-ButtonProps.aria-errormessagenode_modules/@types/react/index.d.ts:2535
aria-expanded?BooleanishIndicates whether the element, or another grouping element it controls, is currently expanded or collapsed.-ButtonProps.aria-expandednode_modules/@types/react/index.d.ts:2537
aria-flowto?stringIdentifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.-ButtonProps.aria-flowtonode_modules/@types/react/index.d.ts:2542
aria-grabbed?BooleanishIndicates an element's "grabbed" state in a drag-and-drop operation. Deprecated in ARIA 1.1-ButtonProps.aria-grabbednode_modules/@types/react/index.d.ts:2547
aria-haspopup?| boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.-ButtonProps.aria-haspopupnode_modules/@types/react/index.d.ts:2549
aria-hidden?BooleanishIndicates whether the element is exposed to an accessibility API. See aria-disabled.-ButtonProps.aria-hiddennode_modules/@types/react/index.d.ts:2554
aria-invalid?boolean | "true" | "false" | "grammar" | "spelling"Indicates the entered value does not conform to the format expected by the application. See aria-errormessage.-ButtonProps.aria-invalidnode_modules/@types/react/index.d.ts:2559
aria-keyshortcuts?stringIndicates keyboard shortcuts that an author has implemented to activate or give focus to an element.-ButtonProps.aria-keyshortcutsnode_modules/@types/react/index.d.ts:2561
aria-label?stringDefines a string value that labels the current element. See aria-labelledby.-ButtonProps.aria-labelnode_modules/@types/react/index.d.ts:2566
aria-labelledby?stringIdentifies the element (or elements) that labels the current element. See aria-describedby.-ButtonProps.aria-labelledbynode_modules/@types/react/index.d.ts:2571
aria-level?numberDefines the hierarchical level of an element within a structure.-ButtonProps.aria-levelnode_modules/@types/react/index.d.ts:2573
aria-live?"off" | "polite" | "assertive"Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.-ButtonProps.aria-livenode_modules/@types/react/index.d.ts:2575
aria-modal?BooleanishIndicates whether an element is modal when displayed.-ButtonProps.aria-modalnode_modules/@types/react/index.d.ts:2577
aria-multiline?BooleanishIndicates whether a text box accepts multiple lines of input or only a single line.-ButtonProps.aria-multilinenode_modules/@types/react/index.d.ts:2579
aria-multiselectable?BooleanishIndicates that the user may select more than one item from the current selectable descendants.-ButtonProps.aria-multiselectablenode_modules/@types/react/index.d.ts:2581
aria-orientation?"horizontal" | "vertical"Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.-ButtonProps.aria-orientationnode_modules/@types/react/index.d.ts:2583
aria-owns?stringIdentifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. See aria-controls.-ButtonProps.aria-ownsnode_modules/@types/react/index.d.ts:2589
aria-placeholder?stringDefines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.-ButtonProps.aria-placeholdernode_modules/@types/react/index.d.ts:2594
aria-posinset?numberDefines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See aria-setsize.-ButtonProps.aria-posinsetnode_modules/@types/react/index.d.ts:2599
aria-pressed?boolean | "true" | "false" | "mixed"Indicates the current "pressed" state of toggle buttons. See - aria-checked - aria-selected.-ButtonProps.aria-pressednode_modules/@types/react/index.d.ts:2604
aria-readonly?BooleanishIndicates that the element is not editable, but is otherwise operable. See aria-disabled.-ButtonProps.aria-readonlynode_modules/@types/react/index.d.ts:2609
aria-relevant?| "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. See aria-atomic.-ButtonProps.aria-relevantnode_modules/@types/react/index.d.ts:2614
aria-required?BooleanishIndicates that user input is required on the element before a form may be submitted.-ButtonProps.aria-requirednode_modules/@types/react/index.d.ts:2627
aria-roledescription?stringDefines a human-readable, author-localized description for the role of an element.-ButtonProps.aria-roledescriptionnode_modules/@types/react/index.d.ts:2629
aria-rowcount?numberDefines the total number of rows in a table, grid, or treegrid. See aria-rowindex.-ButtonProps.aria-rowcountnode_modules/@types/react/index.d.ts:2634
aria-rowindex?numberDefines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. See - aria-rowcount - aria-rowspan.-ButtonProps.aria-rowindexnode_modules/@types/react/index.d.ts:2639
aria-rowindextext?stringDefines a human readable text alternative of aria-rowindex. See aria-colindextext.-ButtonProps.aria-rowindextextnode_modules/@types/react/index.d.ts:2644
aria-rowspan?numberDefines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. See - aria-rowindex - aria-colspan.-ButtonProps.aria-rowspannode_modules/@types/react/index.d.ts:2649
aria-selected?BooleanishIndicates the current "selected" state of various widgets. See - aria-checked - aria-pressed.-ButtonProps.aria-selectednode_modules/@types/react/index.d.ts:2654
aria-setsize?numberDefines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See aria-posinset.-ButtonProps.aria-setsizenode_modules/@types/react/index.d.ts:2659
aria-sort?"none" | "ascending" | "descending" | "other"Indicates if items in a table or grid are sorted in ascending or descending order.-ButtonProps.aria-sortnode_modules/@types/react/index.d.ts:2661
aria-valuemax?numberDefines the maximum allowed value for a range widget.-ButtonProps.aria-valuemaxnode_modules/@types/react/index.d.ts:2663
aria-valuemin?numberDefines the minimum allowed value for a range widget.-ButtonProps.aria-valueminnode_modules/@types/react/index.d.ts:2665
aria-valuenow?numberDefines the current value for a range widget. See aria-valuetext.-ButtonProps.aria-valuenownode_modules/@types/react/index.d.ts:2670
aria-valuetext?stringDefines the human readable text alternative of aria-valuenow for a range widget.-ButtonProps.aria-valuetextnode_modules/@types/react/index.d.ts:2672
defaultChecked?boolean--ButtonProps.defaultCheckednode_modules/@types/react/index.d.ts:2750
suppressContentEditableWarning?boolean--ButtonProps.suppressContentEditableWarningnode_modules/@types/react/index.d.ts:2752
suppressHydrationWarning?boolean--ButtonProps.suppressHydrationWarningnode_modules/@types/react/index.d.ts:2753
accessKey?string--ButtonProps.accessKeynode_modules/@types/react/index.d.ts:2756
autoCapitalize?| "off" | "none" | "on" | "sentences" | "words" | "characters" | string & object--ButtonProps.autoCapitalizenode_modules/@types/react/index.d.ts:2757
autoFocus?boolean--ButtonProps.autoFocusnode_modules/@types/react/index.d.ts:2758
contentEditable?Booleanish | "inherit" | "plaintext-only"--ButtonProps.contentEditablenode_modules/@types/react/index.d.ts:2760
contextMenu?string--ButtonProps.contextMenunode_modules/@types/react/index.d.ts:2761
draggable?Booleanish--ButtonProps.draggablenode_modules/@types/react/index.d.ts:2763
enterKeyHint?"search" | "enter" | "done" | "go" | "next" | "previous" | "send"--ButtonProps.enterKeyHintnode_modules/@types/react/index.d.ts:2764
hidden?boolean--ButtonProps.hiddennode_modules/@types/react/index.d.ts:2765
id?string--ButtonProps.idnode_modules/@types/react/index.d.ts:2766
lang?string--ButtonProps.langnode_modules/@types/react/index.d.ts:2767
nonce?string--ButtonProps.noncenode_modules/@types/react/index.d.ts:2768
slot?string--ButtonProps.slotnode_modules/@types/react/index.d.ts:2769
spellCheck?Booleanish--ButtonProps.spellChecknode_modules/@types/react/index.d.ts:2770
style?CSSProperties--ButtonProps.stylenode_modules/@types/react/index.d.ts:2771
tabIndex?number--ButtonProps.tabIndexnode_modules/@types/react/index.d.ts:2772
title?string--ButtonProps.titlenode_modules/@types/react/index.d.ts:2773
translate?"yes" | "no"--ButtonProps.translatenode_modules/@types/react/index.d.ts:2774
radioGroup?string--ButtonProps.radioGroupnode_modules/@types/react/index.d.ts:2777
role?AriaRole--ButtonProps.rolenode_modules/@types/react/index.d.ts:2780
about?string--ButtonProps.aboutnode_modules/@types/react/index.d.ts:2783
content?string--ButtonProps.contentnode_modules/@types/react/index.d.ts:2784
datatype?string--ButtonProps.datatypenode_modules/@types/react/index.d.ts:2785
inlist?any--ButtonProps.inlistnode_modules/@types/react/index.d.ts:2786
prefix?string--ButtonProps.prefixnode_modules/@types/react/index.d.ts:2787
property?string--ButtonProps.propertynode_modules/@types/react/index.d.ts:2788
rel?string--ButtonProps.relnode_modules/@types/react/index.d.ts:2789
resource?string--ButtonProps.resourcenode_modules/@types/react/index.d.ts:2790
rev?string--ButtonProps.revnode_modules/@types/react/index.d.ts:2791
typeof?string--ButtonProps.typeofnode_modules/@types/react/index.d.ts:2792
vocab?string--ButtonProps.vocabnode_modules/@types/react/index.d.ts:2793
autoCorrect?string--ButtonProps.autoCorrectnode_modules/@types/react/index.d.ts:2796
autoSave?string--ButtonProps.autoSavenode_modules/@types/react/index.d.ts:2797
color?string--ButtonProps.colornode_modules/@types/react/index.d.ts:2798
itemProp?string--ButtonProps.itemPropnode_modules/@types/react/index.d.ts:2799
itemScope?boolean--ButtonProps.itemScopenode_modules/@types/react/index.d.ts:2800
itemType?string--ButtonProps.itemTypenode_modules/@types/react/index.d.ts:2801
itemID?string--ButtonProps.itemIDnode_modules/@types/react/index.d.ts:2802
itemRef?string--ButtonProps.itemRefnode_modules/@types/react/index.d.ts:2803
results?number--ButtonProps.resultsnode_modules/@types/react/index.d.ts:2804
security?string--ButtonProps.securitynode_modules/@types/react/index.d.ts:2805
unselectable?"off" | "on"--ButtonProps.unselectablenode_modules/@types/react/index.d.ts:2806
popover?"" | "auto" | "manual" | "hint"--ButtonProps.popovernode_modules/@types/react/index.d.ts:2809
popoverTargetAction?"toggle" | "show" | "hide"--ButtonProps.popoverTargetActionnode_modules/@types/react/index.d.ts:2810
popoverTarget?string--ButtonProps.popoverTargetnode_modules/@types/react/index.d.ts:2811
inert?booleanSee https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert-ButtonProps.inertnode_modules/@types/react/index.d.ts:2817
inputMode?| "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"Hints at the type of data that might be entered by the user while editing the element or its contents See https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute-ButtonProps.inputModenode_modules/@types/react/index.d.ts:2822
is?stringSpecify that a standard HTML element should behave like a defined custom built-in element See https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is-ButtonProps.isnode_modules/@types/react/index.d.ts:2827
exportparts?stringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts-ButtonProps.exportpartsnode_modules/@types/react/index.d.ts:2831
part?stringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part-ButtonProps.partnode_modules/@types/react/index.d.ts:2835

RadioGroup()​

function RadioGroup<T>(__namedParameters): Element;

Defined in: src/components/RadioGroup/RadioGroup.tsx:97

A component that composes a complete radio group with labeled options.

This component renders a list of radio buttons with labels, arranged horizontally or vertically, with appropriate spacing and wrapping behavior. It's recommended to use this component instead of the primitive Radio component, unless you need complex custom behavior.

Type Parameters​

Type ParameterDescription
T extends stringThe type of the value (string usually, but supports enum)

Parameters​

ParameterType
__namedParametersRadioGroupProps<T>

Returns​

Element

Examples​

// Basic usage with string values
<RadioGroup
  options={[
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" }
  ]}
  onChange={(value) => console.log(value)}
/>
// With controlled value
const [value, setValue] = useState("option1");
<RadioGroup
  options={[
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" }
  ]}
  value={value}
  onChange={setValue}
/>
// Horizontal layout
<RadioGroup
  direction="row"
  options={[
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" }
  ]}
  onChange={handleChange}
/>