formsstable

Radio

Accessible single-choice selection control with labels, descriptions, and validation states.

Documentation
Preview
Live
Size
Color
Options

Usage

Import the component and configure it with the same props used in the playground.

tsx

Examples

Common patterns and practical usage examples.

Basic

Standalone radio option.

tsx

Selected

Selected state.

tsx

Disabled

Disabled state.

tsx

Required

Required form control.

tsx

Error

Validation error state.

Please choose an option.
tsx

Size and color

Large semantic radio treatment.

tsx

API

Props available for the React Radio.

13 props
PropTypeDefaultDescription
label
ReactNode-Visible label rendered next to the control.
description
ReactNode-Helper text rendered below the label.
icon
ReactNode-Custom indicator rendered for the checked state.
color
'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Selected radio color.
wrapperClassName
string-Extra CSS class for the clickable label wrapper.
valueRequired
string-Value represented by the radio control.
checked
boolean-Controlled checked state for standalone usage.
defaultChecked
booleanfalseInitial checked state for uncontrolled standalone usage.
disabled
booleanfalseDisables interaction and applies disabled styling.
required
booleanfalseMarks the radio as required.
error
string-Validation error rendered for invalid state.
size
'sm' | 'md' | 'lg''md'Controls radio indicator and label sizing.
onCheckedChange
((checked: boolean) => void)-Called when the standalone checked state changes.
Inherited React DOM props300

These props are forwarded to the underlying React DOM element.

PropTypeDescription
form
string-
slot
string-
style
CSSProperties-
title
string-
pattern
string-
key
Key | null-
accept
string-
alt
string-
autoComplete
HTMLInputAutoCompleteAttribute-
capture
boolean | 'user' | 'environment'-
formAction
string | ((formData: FormData) => v...Full typestring | ((formData: FormData) => void | Promise<void>)
-
formEncType
string-
formMethod
string-
formNoValidate
boolean-
formTarget
string-
height
string | number-
list
string-
max
string | number-
maxLength
number-
min
string | number-
minLength
number-
multiple
boolean-
name
string-
placeholder
string-
readOnly
boolean-
src
string-
step
string | number-
width
string | number-
defaultValue
string | number | readonly string[]-
suppressContentEditableWarning
boolean-
suppressHydrationWarning
boolean-
accessKey
string-
autoCapitalize
(string & {}) | 'off' | 'on' | 'non...Full type(string & {}) | 'off' | 'on' | 'none' | 'sentences' | 'words' | 'characters'
-
autoFocus
boolean-
className
string-
contentEditable
Booleanish | 'inherit' | 'plaintext...Full typeBooleanish | 'inherit' | 'plaintext-only'
-
contextMenu
string-
dir
string-
draggable
Booleanish-
enterKeyHint
'search' | 'enter' | 'done' | 'go'...Full type'search' | 'enter' | 'done' | 'go' | 'next' | 'previous' | 'send'
-
hidden
boolean-
id
string-
lang
string-
nonce
string-
spellCheck
Booleanish-
tabIndex
number-
translate
'yes' | 'no'-
radioGroup
string-
role
AriaRole-
about
string-
content
string-
datatype
string-
inlist
any-
prefix
string-
property
string-
rel
string-
resource
string-
rev
string-
typeof
string-
vocab
string-
autoCorrect
string-
autoSave
string-
itemProp
string-
itemScope
boolean-
itemType
string-
itemID
string-
itemRef
string-
results
number-
security
string-
unselectable
'off' | 'on'-
popover
'' | 'auto' | 'manual' | 'hint'Full type'' | 'auto' | 'manual' | 'hint'
-
popoverTargetAction
'toggle' | 'show' | 'hide'-
popoverTarget
string-
inert
boolean-
inputMode
'search' | 'text' | 'email' | 'tel'...Full type'search' | 'text' | 'email' | 'tel' | 'none' | 'url' | 'numeric' | 'decimal'
Show description

Hints at the type of data that might be entered by the user while editing the element or its contents

is
string
Show description

Specify that a standard HTML element should behave like a defined custom built-in element

exportparts
string-
part
string-
aria-activedescendant
string
Show description

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

aria-atomic
Booleanish
Show description

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

aria-autocomplete
'list' | 'none' | 'inline' | 'both'Full type'list' | 'none' | 'inline' | 'both'
Show description

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.

aria-braillelabel
string
Show description

Defines a string value that labels the current element, which is intended to be converted into Braille.

aria-brailleroledescription
string
Show description

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

aria-busy
Booleanish-
aria-checked
boolean | 'true' | 'false' | 'mixed'Full typeboolean | 'true' | 'false' | 'mixed'
Show description

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

aria-colcount
number
Show description

Defines the total number of columns in a table, grid, or treegrid.

aria-colindex
number
Show description

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

aria-colindextext
string
Show description

Defines a human readable text alternative of aria-colindex.

aria-colspan
number
Show description

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

aria-controls
string
Show description

Identifies the element (or elements) whose contents or presence are controlled by the current element.

aria-current
boolean | 'time' | 'step' | 'true'...Full typeboolean | 'time' | 'step' | 'true' | 'false' | 'page' | 'location' | 'date'
Show description

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby
string
Show description

Identifies the element (or elements) that describes the object.

aria-description
string
Show description

Defines a string value that describes or annotates the current element.

aria-details
string
Show description

Identifies the element that provides a detailed, extended description for the object.

aria-disabled
Booleanish
Show description

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

aria-dropeffect
'link' | 'none' | 'copy' | 'execute...Full type'link' | 'none' | 'copy' | 'execute' | 'move' | 'popup'
Show description

Indicates what functions can be performed when a dragged object is released on the drop target.

aria-errormessage
string
Show description

Identifies the element that provides an error message for the object.

aria-expanded
Booleanish
Show description

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

aria-flowto
string
Show description

Identifies 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.

aria-grabbed
Booleanish
Show description

Indicates an element's "grabbed" state in a drag-and-drop operation.

aria-haspopup
boolean | 'dialog' | 'menu' | 'true...Full typeboolean | 'dialog' | 'menu' | 'true' | 'false' | 'grid' | 'listbox' | 'tree'
Show description

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hidden
Booleanish
Show description

Indicates whether the element is exposed to an accessibility API.

aria-invalid
boolean | 'true' | 'false' | 'gramm...Full typeboolean | 'true' | 'false' | 'grammar' | 'spelling'
Show description

Indicates the entered value does not conform to the format expected by the application.

aria-keyshortcuts
string
Show description

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-label
string
Show description

Defines a string value that labels the current element.

aria-labelledby
string
Show description

Identifies the element (or elements) that labels the current element.

aria-level
number
Show description

Defines the hierarchical level of an element within a structure.

aria-live
'off' | 'assertive' | 'polite'
Show description

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.

aria-modal
Booleanish
Show description

Indicates whether an element is modal when displayed.

aria-multiline
Booleanish
Show description

Indicates whether a text box accepts multiple lines of input or only a single line.

aria-multiselectable
Booleanish
Show description

Indicates that the user may select more than one item from the current selectable descendants.

aria-orientation
'horizontal' | 'vertical'
Show description

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

aria-owns
string
Show description

Identifies 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.

aria-placeholder
string
Show description

Defines 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.

aria-posinset
number
Show description

Defines 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.

aria-pressed
boolean | 'true' | 'false' | 'mixed'Full typeboolean | 'true' | 'false' | 'mixed'
Show description

Indicates the current "pressed" state of toggle buttons.

aria-readonly
Booleanish
Show description

Indicates that the element is not editable, but is otherwise operable.

aria-relevant
'text' | 'additions' | 'additions r...Full type'text' | 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text additions' | 'text removals'
Show description

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

aria-required
Booleanish
Show description

Indicates that user input is required on the element before a form may be submitted.

aria-roledescription
string
Show description

Defines a human-readable, author-localized description for the role of an element.

aria-rowcount
number
Show description

Defines the total number of rows in a table, grid, or treegrid.

aria-rowindex
number
Show description

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

aria-rowindextext
string
Show description

Defines a human readable text alternative of aria-rowindex.

aria-rowspan
number
Show description

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

aria-selected
Booleanish
Show description

Indicates the current "selected" state of various widgets.

aria-setsize
number
Show description

Defines 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.

aria-sort
'none' | 'ascending' | 'descending'...Full type'none' | 'ascending' | 'descending' | 'other'
Show description

Indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemax
number
Show description

Defines the maximum allowed value for a range widget.

aria-valuemin
number
Show description

Defines the minimum allowed value for a range widget.

aria-valuenow
number
Show description

Defines the current value for a range widget.

aria-valuetext
string
Show description

Defines the human readable text alternative of aria-valuenow for a range widget.

children
ReactNode-
dangerouslySetInnerHTML
{ __html: string | TrustedHTML; }-
onCopy
ClipboardEventHandler<HTMLInputElement>-
onCopyCapture
ClipboardEventHandler<HTMLInputElement>-
onCut
ClipboardEventHandler<HTMLInputElement>-
onCutCapture
ClipboardEventHandler<HTMLInputElement>-
onPaste
ClipboardEventHandler<HTMLInputElement>-
onPasteCapture
ClipboardEventHandler<HTMLInputElement>-
onCompositionEnd
CompositionEventHandler<HTMLInputEl...Full typeCompositionEventHandler<HTMLInputElement>
-
onCompositionEndCapture
CompositionEventHandler<HTMLInputEl...Full typeCompositionEventHandler<HTMLInputElement>
-
onCompositionStart
CompositionEventHandler<HTMLInputEl...Full typeCompositionEventHandler<HTMLInputElement>
-
onCompositionStartCapture
CompositionEventHandler<HTMLInputEl...Full typeCompositionEventHandler<HTMLInputElement>
-
onCompositionUpdate
CompositionEventHandler<HTMLInputEl...Full typeCompositionEventHandler<HTMLInputElement>
-
onCompositionUpdateCapture
CompositionEventHandler<HTMLInputEl...Full typeCompositionEventHandler<HTMLInputElement>
-
onFocus
FocusEventHandler<HTMLInputElement>-
onFocusCapture
FocusEventHandler<HTMLInputElement>-
onBlur
FocusEventHandler<HTMLInputElement>-
onBlurCapture
FocusEventHandler<HTMLInputElement>-
onChangeCapture
ChangeEventHandler<HTMLInputElement...Full typeChangeEventHandler<HTMLInputElement, Element>
-
onBeforeInput
InputEventHandler<HTMLInputElement>-
onBeforeInputCapture
InputEventHandler<HTMLInputElement>-
onInput
InputEventHandler<HTMLInputElement>-
onInputCapture
InputEventHandler<HTMLInputElement>-
onReset
ReactEventHandler<HTMLInputElement>-
onResetCapture
ReactEventHandler<HTMLInputElement>-
onSubmit
SubmitEventHandler<HTMLInputElement>-
onSubmitCapture
SubmitEventHandler<HTMLInputElement>-
onInvalid
ReactEventHandler<HTMLInputElement>-
onInvalidCapture
ReactEventHandler<HTMLInputElement>-
onLoad
ReactEventHandler<HTMLInputElement>-
onLoadCapture
ReactEventHandler<HTMLInputElement>-
onError
ReactEventHandler<HTMLInputElement>-
onErrorCapture
ReactEventHandler<HTMLInputElement>-
onKeyDown
KeyboardEventHandler<HTMLInputElement>-
onKeyDownCapture
KeyboardEventHandler<HTMLInputElement>-
onKeyPress
KeyboardEventHandler<HTMLInputElement>-
onKeyPressCapture
KeyboardEventHandler<HTMLInputElement>-
onKeyUp
KeyboardEventHandler<HTMLInputElement>-
onKeyUpCapture
KeyboardEventHandler<HTMLInputElement>-
onAbort
ReactEventHandler<HTMLInputElement>-
onAbortCapture
ReactEventHandler<HTMLInputElement>-
onCanPlay
ReactEventHandler<HTMLInputElement>-
onCanPlayCapture
ReactEventHandler<HTMLInputElement>-
onCanPlayThrough
ReactEventHandler<HTMLInputElement>-
onCanPlayThroughCapture
ReactEventHandler<HTMLInputElement>-
onDurationChange
ReactEventHandler<HTMLInputElement>-
onDurationChangeCapture
ReactEventHandler<HTMLInputElement>-
onEmptied
ReactEventHandler<HTMLInputElement>-
onEmptiedCapture
ReactEventHandler<HTMLInputElement>-
onEncrypted
ReactEventHandler<HTMLInputElement>-
onEncryptedCapture
ReactEventHandler<HTMLInputElement>-
onEnded
ReactEventHandler<HTMLInputElement>-
onEndedCapture
ReactEventHandler<HTMLInputElement>-
onLoadedData
ReactEventHandler<HTMLInputElement>-
onLoadedDataCapture
ReactEventHandler<HTMLInputElement>-
onLoadedMetadata
ReactEventHandler<HTMLInputElement>-
onLoadedMetadataCapture
ReactEventHandler<HTMLInputElement>-
onLoadStart
ReactEventHandler<HTMLInputElement>-
onLoadStartCapture
ReactEventHandler<HTMLInputElement>-
onPause
ReactEventHandler<HTMLInputElement>-
onPauseCapture
ReactEventHandler<HTMLInputElement>-
onPlay
ReactEventHandler<HTMLInputElement>-
onPlayCapture
ReactEventHandler<HTMLInputElement>-
onPlaying
ReactEventHandler<HTMLInputElement>-
onPlayingCapture
ReactEventHandler<HTMLInputElement>-
onProgress
ReactEventHandler<HTMLInputElement>-
onProgressCapture
ReactEventHandler<HTMLInputElement>-
onRateChange
ReactEventHandler<HTMLInputElement>-
onRateChangeCapture
ReactEventHandler<HTMLInputElement>-
onSeeked
ReactEventHandler<HTMLInputElement>-
onSeekedCapture
ReactEventHandler<HTMLInputElement>-
onSeeking
ReactEventHandler<HTMLInputElement>-
onSeekingCapture
ReactEventHandler<HTMLInputElement>-
onStalled
ReactEventHandler<HTMLInputElement>-
onStalledCapture
ReactEventHandler<HTMLInputElement>-
onSuspend
ReactEventHandler<HTMLInputElement>-
onSuspendCapture
ReactEventHandler<HTMLInputElement>-
onTimeUpdate
ReactEventHandler<HTMLInputElement>-
onTimeUpdateCapture
ReactEventHandler<HTMLInputElement>-
onVolumeChange
ReactEventHandler<HTMLInputElement>-
onVolumeChangeCapture
ReactEventHandler<HTMLInputElement>-
onWaiting
ReactEventHandler<HTMLInputElement>-
onWaitingCapture
ReactEventHandler<HTMLInputElement>-
onAuxClick
MouseEventHandler<HTMLInputElement>-
onAuxClickCapture
MouseEventHandler<HTMLInputElement>-
onClick
MouseEventHandler<HTMLInputElement>-
onClickCapture
MouseEventHandler<HTMLInputElement>-
onContextMenu
MouseEventHandler<HTMLInputElement>-
onContextMenuCapture
MouseEventHandler<HTMLInputElement>-
onDoubleClick
MouseEventHandler<HTMLInputElement>-
onDoubleClickCapture
MouseEventHandler<HTMLInputElement>-
onDrag
DragEventHandler<HTMLInputElement>-
onDragCapture
DragEventHandler<HTMLInputElement>-
onDragEnd
DragEventHandler<HTMLInputElement>-
onDragEndCapture
DragEventHandler<HTMLInputElement>-
onDragEnter
DragEventHandler<HTMLInputElement>-
onDragEnterCapture
DragEventHandler<HTMLInputElement>-
onDragExit
DragEventHandler<HTMLInputElement>-
onDragExitCapture
DragEventHandler<HTMLInputElement>-
onDragLeave
DragEventHandler<HTMLInputElement>-
onDragLeaveCapture
DragEventHandler<HTMLInputElement>-
onDragOver
DragEventHandler<HTMLInputElement>-
onDragOverCapture
DragEventHandler<HTMLInputElement>-
onDragStart
DragEventHandler<HTMLInputElement>-
onDragStartCapture
DragEventHandler<HTMLInputElement>-
onDrop
DragEventHandler<HTMLInputElement>-
onDropCapture
DragEventHandler<HTMLInputElement>-
onMouseDown
MouseEventHandler<HTMLInputElement>-
onMouseDownCapture
MouseEventHandler<HTMLInputElement>-
onMouseEnter
MouseEventHandler<HTMLInputElement>-
onMouseLeave
MouseEventHandler<HTMLInputElement>-
onMouseMove
MouseEventHandler<HTMLInputElement>-
onMouseMoveCapture
MouseEventHandler<HTMLInputElement>-
onMouseOut
MouseEventHandler<HTMLInputElement>-
onMouseOutCapture
MouseEventHandler<HTMLInputElement>-
onMouseOver
MouseEventHandler<HTMLInputElement>-
onMouseOverCapture
MouseEventHandler<HTMLInputElement>-
onMouseUp
MouseEventHandler<HTMLInputElement>-
onMouseUpCapture
MouseEventHandler<HTMLInputElement>-
onSelect
ReactEventHandler<HTMLInputElement>-
onSelectCapture
ReactEventHandler<HTMLInputElement>-
onTouchCancel
TouchEventHandler<HTMLInputElement>-
onTouchCancelCapture
TouchEventHandler<HTMLInputElement>-
onTouchEnd
TouchEventHandler<HTMLInputElement>-
onTouchEndCapture
TouchEventHandler<HTMLInputElement>-
onTouchMove
TouchEventHandler<HTMLInputElement>-
onTouchMoveCapture
TouchEventHandler<HTMLInputElement>-
onTouchStart
TouchEventHandler<HTMLInputElement>-
onTouchStartCapture
TouchEventHandler<HTMLInputElement>-
onPointerDown
PointerEventHandler<HTMLInputElement>-
onPointerDownCapture
PointerEventHandler<HTMLInputElement>-
onPointerMove
PointerEventHandler<HTMLInputElement>-
onPointerMoveCapture
PointerEventHandler<HTMLInputElement>-
onPointerUp
PointerEventHandler<HTMLInputElement>-
onPointerUpCapture
PointerEventHandler<HTMLInputElement>-
onPointerCancel
PointerEventHandler<HTMLInputElement>-
onPointerCancelCapture
PointerEventHandler<HTMLInputElement>-
onPointerEnter
PointerEventHandler<HTMLInputElement>-
onPointerLeave
PointerEventHandler<HTMLInputElement>-
onPointerOver
PointerEventHandler<HTMLInputElement>-
onPointerOverCapture
PointerEventHandler<HTMLInputElement>-
onPointerOut
PointerEventHandler<HTMLInputElement>-
onPointerOutCapture
PointerEventHandler<HTMLInputElement>-
onGotPointerCapture
PointerEventHandler<HTMLInputElement>-
onGotPointerCaptureCapture
PointerEventHandler<HTMLInputElement>-
onLostPointerCapture
PointerEventHandler<HTMLInputElement>-
onLostPointerCaptureCapture
PointerEventHandler<HTMLInputElement>-
onScroll
UIEventHandler<HTMLInputElement>-
onScrollCapture
UIEventHandler<HTMLInputElement>-
onScrollEnd
UIEventHandler<HTMLInputElement>-
onScrollEndCapture
UIEventHandler<HTMLInputElement>-
onWheel
WheelEventHandler<HTMLInputElement>-
onWheelCapture
WheelEventHandler<HTMLInputElement>-
onAnimationStart
AnimationEventHandler<HTMLInputElement>-
onAnimationStartCapture
AnimationEventHandler<HTMLInputElement>-
onAnimationEnd
AnimationEventHandler<HTMLInputElement>-
onAnimationEndCapture
AnimationEventHandler<HTMLInputElement>-
onAnimationIteration
AnimationEventHandler<HTMLInputElement>-
onAnimationIterationCapture
AnimationEventHandler<HTMLInputElement>-
onToggle
ToggleEventHandler<HTMLInputElement>-
onBeforeToggle
ToggleEventHandler<HTMLInputElement>-
onTransitionCancel
TransitionEventHandler<HTMLInputElement>-
onTransitionCancelCapture
TransitionEventHandler<HTMLInputElement>-
onTransitionEnd
TransitionEventHandler<HTMLInputElement>-
onTransitionEndCapture
TransitionEventHandler<HTMLInputElement>-
onTransitionRun
TransitionEventHandler<HTMLInputElement>-
onTransitionRunCapture
TransitionEventHandler<HTMLInputElement>-
onTransitionStart
TransitionEventHandler<HTMLInputElement>-
onTransitionStartCapture
TransitionEventHandler<HTMLInputElement>-

Accessibility

Guidance for accessible usage and interaction.

Accessible naming

Provide a visible label or another accessible name that clearly identifies the control.
labelchildrenaria-labelaria-labelledby

State communication

Expose the current interactive state through the appropriate native semantics and keep it synchronized with the visual state.
checked

Disabled state

Disabled controls should remain identifiable while preventing interaction.
disabled

Validation feedback

Associate validation feedback with the control and expose its invalid state to assistive technologies.
error

Required fields

Required state should be communicated semantically and not rely only on visual styling.
required

Keyboard and focus

Preserve expected keyboard interaction and visible focus behavior.
onKeyDownonFocusonBluronClick

Related components

Explore components that are commonly used alongside this one.