Radio
单个可选项,通常在 RadioGroup 中声明。
正在加载交互演示…
<Radio.Root
value="system"
checked={theme() === "system"}
onCheckedChange={() => setTheme("system")}
>
<Radio.Indicator />
<Text>System</Text>
</Radio.Root>#导入
从 @quickgui/solid 导入 Radio。
import { Radio } from "@quickgui/solid";#用法
<Radio.Root
value="system"
checked={theme() === "system"}
onCheckedChange={() => setTheme("system")}
>
<Radio.Indicator />
<Text>System</Text>
</Radio.Root>#结构
Radio.RootRadio.Indicator
<Radio.Root>
<Radio.Indicator />
</Radio.Root>#API 参考
展开条目查看说明和完整签名。短横线表示声明中未记录默认值。
Radio
查看源码Radio(props: JSX.RadioProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码readOnlyboolean—
valuestring—
checkedboolean—
defaultCheckedboolean—
Declares defaultChecked (optional). Reactive JSX expressions update this property in place.
boolean查看源码onCheckedChange(checked: boolean, event: QuickGuiEvent) => void—
Declares onCheckedChange (optional). Reactive JSX expressions update this property in place.
(checked: boolean, event: QuickGuiEvent) => void查看源码Radio.Root
查看源码Radio.Root(props: JSX.RadioProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码readOnlyboolean—
valuestring—
checkedboolean—
defaultCheckedboolean—
Declares defaultChecked (optional). Reactive JSX expressions update this property in place.
boolean查看源码onCheckedChange(checked: boolean, event: QuickGuiEvent) => void—
Declares onCheckedChange (optional). Reactive JSX expressions update this property in place.
(checked: boolean, event: QuickGuiEvent) => void查看源码Radio.Indicator
查看源码Radio.Indicator(props: JSX.NativeProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码