SegmentedControl

Properties

Property	Type	Default	Description
id	string	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
translate	"yes" | "no"	-
className	ClassNameOrFunction<RadioGroupRenderProps>	'react-aria-RadioGroup'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
style	StyleOrFunction<TooltipRenderProps>	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", TooltipRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
dir	string	-
lang	string	-
hidden	boolean	-
inert	boolean	-
validationBehavior	"native" | "aria"	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
isDisabled	boolean	-	Whether the input is disabled.
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isRequired	boolean	-	Whether user input is required on the input before form submission.
isInvalid	boolean	-	Whether the input value is invalid.
validate	((value: TimeValue) => true | ValidationError)	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
value	TimeValue	-	The current value (controlled).
defaultValue	TimeValue	-	The default value (uncontrolled).
name	string	-	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
form	string	-	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
orientation	Orientation	'vertical'	The axis the Radio Button(s) should align with.
children	ReactNode	-
wrapWith	ReactElement<unknown, string | JSXElementConstructor<any>>	-
ref	Ref<HTMLSpanElement>	-	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
key	Key	-
containerBreakpointSize	ContainerBreakpointSize	-

Events

Property	Type	Default	Description
onClick	MouseEventHandler<HTMLDivElement>	-
onClickCapture	MouseEventHandler<HTMLDivElement>	-
onAuxClick	MouseEventHandler<HTMLDivElement>	-
onAuxClickCapture	MouseEventHandler<HTMLDivElement>	-
onContextMenu	MouseEventHandler<HTMLDivElement>	-
onContextMenuCapture	MouseEventHandler<HTMLDivElement>	-
onDoubleClick	MouseEventHandler<HTMLDivElement>	-
onDoubleClickCapture	MouseEventHandler<HTMLDivElement>	-
onMouseDown	MouseEventHandler<HTMLDivElement>	-
onMouseDownCapture	MouseEventHandler<HTMLDivElement>	-
onMouseEnter	MouseEventHandler<HTMLDivElement>	-
onMouseLeave	MouseEventHandler<HTMLDivElement>	-
onMouseMove	MouseEventHandler<HTMLDivElement>	-
onMouseMoveCapture	MouseEventHandler<HTMLDivElement>	-
onMouseOut	MouseEventHandler<HTMLDivElement>	-
onMouseOutCapture	MouseEventHandler<HTMLDivElement>	-
onMouseOver	MouseEventHandler<HTMLDivElement>	-
onMouseOverCapture	MouseEventHandler<HTMLDivElement>	-
onMouseUp	MouseEventHandler<HTMLDivElement>	-
onMouseUpCapture	MouseEventHandler<HTMLDivElement>	-
onTouchCancel	TouchEventHandler<HTMLDivElement>	-
onTouchCancelCapture	TouchEventHandler<HTMLDivElement>	-
onTouchEnd	TouchEventHandler<HTMLDivElement>	-
onTouchEndCapture	TouchEventHandler<HTMLDivElement>	-
onTouchMove	TouchEventHandler<HTMLDivElement>	-
onTouchMoveCapture	TouchEventHandler<HTMLDivElement>	-
onTouchStart	TouchEventHandler<HTMLDivElement>	-
onTouchStartCapture	TouchEventHandler<HTMLDivElement>	-
onPointerDown	PointerEventHandler<HTMLDivElement>	-
onPointerDownCapture	PointerEventHandler<HTMLDivElement>	-
onPointerMove	PointerEventHandler<HTMLDivElement>	-
onPointerMoveCapture	PointerEventHandler<HTMLDivElement>	-
onPointerUp	PointerEventHandler<HTMLDivElement>	-
onPointerUpCapture	PointerEventHandler<HTMLDivElement>	-
onPointerCancel	PointerEventHandler<HTMLDivElement>	-
onPointerCancelCapture	PointerEventHandler<HTMLDivElement>	-
onPointerEnter	PointerEventHandler<HTMLDivElement>	-
onPointerLeave	PointerEventHandler<HTMLDivElement>	-
onPointerOver	PointerEventHandler<HTMLDivElement>	-
onPointerOverCapture	PointerEventHandler<HTMLDivElement>	-
onPointerOut	PointerEventHandler<HTMLDivElement>	-
onPointerOutCapture	PointerEventHandler<HTMLDivElement>	-
onGotPointerCapture	PointerEventHandler<HTMLDivElement>	-
onGotPointerCaptureCapture	PointerEventHandler<HTMLDivElement>	-
onLostPointerCapture	PointerEventHandler<HTMLDivElement>	-
onLostPointerCaptureCapture	PointerEventHandler<HTMLDivElement>	-
onScroll	UIEventHandler<HTMLDivElement>	-
onScrollCapture	UIEventHandler<HTMLDivElement>	-
onWheel	WheelEventHandler<HTMLDivElement>	-
onWheelCapture	WheelEventHandler<HTMLDivElement>	-
onAnimationStart	AnimationEventHandler<HTMLDivElement>	-
onAnimationStartCapture	AnimationEventHandler<HTMLDivElement>	-
onAnimationEnd	AnimationEventHandler<HTMLDivElement>	-
onAnimationEndCapture	AnimationEventHandler<HTMLDivElement>	-
onAnimationIteration	AnimationEventHandler<HTMLDivElement>	-
onAnimationIterationCapture	AnimationEventHandler<HTMLDivElement>	-
onTransitionCancel	TransitionEventHandler<HTMLDivElement>	-
onTransitionCancelCapture	TransitionEventHandler<HTMLDivElement>	-
onTransitionEnd	TransitionEventHandler<HTMLDivElement>	-
onTransitionEndCapture	TransitionEventHandler<HTMLDivElement>	-
onTransitionRun	TransitionEventHandler<HTMLDivElement>	-
onTransitionRunCapture	TransitionEventHandler<HTMLDivElement>	-
onTransitionStart	TransitionEventHandler<HTMLDivElement>	-
onTransitionStartCapture	TransitionEventHandler<HTMLDivElement>	-
onFocus	((e: FocusEvent<Element, Element>) => void)	-	Handler that is called when the element receives focus.
onBlur	((e: FocusEvent<Element, Element>) => void)	-	Handler that is called when the element loses focus.
onFocusChange	((isFocused: boolean) => void)	-	Handler that is called when the element's focus status changes.
onChange	((value: TimeValue) => void)	-	Handler that is called when the value changes.

Accessibility

Property	Type	Default	Description
aria-label	string	-	Defines a string value that labels the current element.
aria-labelledby	string	-	Identifies the element (or elements) that labels the current element.
aria-describedby	string	-	Identifies the element (or elements) that describes the object.
aria-details	string	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-errormessage	string	-	Identifies the element that provides an error message for the object.