FieldGroup
A group represents a set of related UI controls, and supports interactive states for styling.
Preview
Code
Examples
Select + TextField
Preview
Code
SearchField + Kbd
Preview
Code
/
Props
Name | Type | Default |
|---|---|---|
isDisabled | boolean | — |
isInvalid | boolean | — |
role | "group" | "presentation" | "region" | 'group' |
suppressHydrationWarning | boolean | — |
color | string | — |
id | string | — |
lang | string | — |
tabIndex | number | — |
dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | — |
onCopy | ClipboardEventHandler<HTMLElement> | — |
onCopyCapture | ClipboardEventHandler<HTMLElement> | — |
onCut | ClipboardEventHandler<HTMLElement> | — |
onCutCapture | ClipboardEventHandler<HTMLElement> | — |
onPaste | ClipboardEventHandler<HTMLElement> | — |
onPasteCapture | ClipboardEventHandler<HTMLElement> | — |
onCompositionEnd | CompositionEventHandler<HTMLElement> | — |
onCompositionEndCapture | CompositionEventHandler<HTMLElement> | — |
onCompositionStart | CompositionEventHandler<HTMLElement> | — |
onCompositionStartCapture | CompositionEventHandler<HTMLElement> | — |
onCompositionUpdate | CompositionEventHandler<HTMLElement> | — |
onCompositionUpdateCapture | CompositionEventHandler<HTMLElement> | — |
onFocus | FocusEventHandler<HTMLElement> | — |
onFocusCapture | FocusEventHandler<HTMLElement> | — |
onBlur | FocusEventHandler<HTMLElement> | — |
onBlurCapture | FocusEventHandler<HTMLElement> | — |
onChange | FormEventHandler<HTMLElement> | — |
onChangeCapture | FormEventHandler<HTMLElement> | — |
onBeforeInput | FormEventHandler<HTMLElement> | — |
onBeforeInputCapture | FormEventHandler<HTMLElement> | — |
onInput | FormEventHandler<HTMLElement> | — |
onInputCapture | FormEventHandler<HTMLElement> | — |
onReset | FormEventHandler<HTMLElement> | — |
onResetCapture | FormEventHandler<HTMLElement> | — |
onSubmit | FormEventHandler<HTMLElement> | — |
onSubmitCapture | FormEventHandler<HTMLElement> | — |
onInvalid | FormEventHandler<HTMLElement> | — |
onInvalidCapture | FormEventHandler<HTMLElement> | — |
onLoad | ReactEventHandler<HTMLElement> | — |
onLoadCapture | ReactEventHandler<HTMLElement> | — |
onError | ReactEventHandler<HTMLElement> | — |
onErrorCapture | ReactEventHandler<HTMLElement> | — |
onKeyDown | KeyboardEventHandler<HTMLElement> | — |
onKeyDownCapture | KeyboardEventHandler<HTMLElement> | — |
onKeyPress | KeyboardEventHandler<HTMLElement> | — |
onKeyPressCapture | KeyboardEventHandler<HTMLElement> | — |
onKeyUp | KeyboardEventHandler<HTMLElement> | — |
onKeyUpCapture | KeyboardEventHandler<HTMLElement> | — |
onAbort | ReactEventHandler<HTMLElement> | — |
onAbortCapture | ReactEventHandler<HTMLElement> | — |
onCanPlay | ReactEventHandler<HTMLElement> | — |
onCanPlayCapture | ReactEventHandler<HTMLElement> | — |
onCanPlayThrough | ReactEventHandler<HTMLElement> | — |
onCanPlayThroughCapture | ReactEventHandler<HTMLElement> | — |
onDurationChange | ReactEventHandler<HTMLElement> | — |
onDurationChangeCapture | ReactEventHandler<HTMLElement> | — |
onEmptied | ReactEventHandler<HTMLElement> | — |
onEmptiedCapture | ReactEventHandler<HTMLElement> | — |
onEncrypted | ReactEventHandler<HTMLElement> | — |
onEncryptedCapture | ReactEventHandler<HTMLElement> | — |
onEnded | ReactEventHandler<HTMLElement> | — |
onEndedCapture | ReactEventHandler<HTMLElement> | — |
onLoadedData | ReactEventHandler<HTMLElement> | — |
onLoadedDataCapture | ReactEventHandler<HTMLElement> | — |
onLoadedMetadata | ReactEventHandler<HTMLElement> | — |
onLoadedMetadataCapture | ReactEventHandler<HTMLElement> | — |
onLoadStart | ReactEventHandler<HTMLElement> | — |
onLoadStartCapture | ReactEventHandler<HTMLElement> | — |
onPause | ReactEventHandler<HTMLElement> | — |
onPauseCapture | ReactEventHandler<HTMLElement> | — |
onPlay | ReactEventHandler<HTMLElement> | — |
onPlayCapture | ReactEventHandler<HTMLElement> | — |
onPlaying | ReactEventHandler<HTMLElement> | — |
onPlayingCapture | ReactEventHandler<HTMLElement> | — |
onProgress | ReactEventHandler<HTMLElement> | — |
onProgressCapture | ReactEventHandler<HTMLElement> | — |
onRateChange | ReactEventHandler<HTMLElement> | — |
onRateChangeCapture | ReactEventHandler<HTMLElement> | — |
onSeeked | ReactEventHandler<HTMLElement> | — |
onSeekedCapture | ReactEventHandler<HTMLElement> | — |
onSeeking | ReactEventHandler<HTMLElement> | — |
onSeekingCapture | ReactEventHandler<HTMLElement> | — |
onStalled | ReactEventHandler<HTMLElement> | — |
onStalledCapture | ReactEventHandler<HTMLElement> | — |
onSuspend | ReactEventHandler<HTMLElement> | — |
onSuspendCapture | ReactEventHandler<HTMLElement> | — |
onTimeUpdate | ReactEventHandler<HTMLElement> | — |
onTimeUpdateCapture | ReactEventHandler<HTMLElement> | — |
onVolumeChange | ReactEventHandler<HTMLElement> | — |
onVolumeChangeCapture | ReactEventHandler<HTMLElement> | — |
onWaiting | ReactEventHandler<HTMLElement> | — |
onWaitingCapture | ReactEventHandler<HTMLElement> | — |
onAuxClick | MouseEventHandler<HTMLElement> | — |
onAuxClickCapture | MouseEventHandler<HTMLElement> | — |
onClick | MouseEventHandler<HTMLElement> | — |
onClickCapture | MouseEventHandler<HTMLElement> | — |
onContextMenu | MouseEventHandler<HTMLElement> | — |
onContextMenuCapture | MouseEventHandler<HTMLElement> | — |
onDoubleClick | MouseEventHandler<HTMLElement> | — |
onDoubleClickCapture | MouseEventHandler<HTMLElement> | — |
onDrag | DragEventHandler<HTMLElement> | — |
onDragCapture | DragEventHandler<HTMLElement> | — |
onDragEnd | DragEventHandler<HTMLElement> | — |
onDragEndCapture | DragEventHandler<HTMLElement> | — |
onDragEnter | DragEventHandler<HTMLElement> | — |
onDragEnterCapture | DragEventHandler<HTMLElement> | — |
onDragExit | DragEventHandler<HTMLElement> | — |
onDragExitCapture | DragEventHandler<HTMLElement> | — |
onDragLeave | DragEventHandler<HTMLElement> | — |
onDragLeaveCapture | DragEventHandler<HTMLElement> | — |
onDragOver | DragEventHandler<HTMLElement> | — |
onDragOverCapture | DragEventHandler<HTMLElement> | — |
onDragStart | DragEventHandler<HTMLElement> | — |
onDragStartCapture | DragEventHandler<HTMLElement> | — |
onDrop | DragEventHandler<HTMLElement> | — |
onDropCapture | DragEventHandler<HTMLElement> | — |
onMouseDown | MouseEventHandler<HTMLElement> | — |
onMouseDownCapture | MouseEventHandler<HTMLElement> | — |
onMouseEnter | MouseEventHandler<HTMLElement> | — |
onMouseLeave | MouseEventHandler<HTMLElement> | — |
onMouseMove | MouseEventHandler<HTMLElement> | — |
onMouseMoveCapture | MouseEventHandler<HTMLElement> | — |
onMouseOut | MouseEventHandler<HTMLElement> | — |
onMouseOutCapture | MouseEventHandler<HTMLElement> | — |
onMouseOver | MouseEventHandler<HTMLElement> | — |
onMouseOverCapture | MouseEventHandler<HTMLElement> | — |
onMouseUp | MouseEventHandler<HTMLElement> | — |
onMouseUpCapture | MouseEventHandler<HTMLElement> | — |
onSelect | ReactEventHandler<HTMLElement> | — |
onSelectCapture | ReactEventHandler<HTMLElement> | — |
onTouchCancel | TouchEventHandler<HTMLElement> | — |
onTouchCancelCapture | TouchEventHandler<HTMLElement> | — |
onTouchEnd | TouchEventHandler<HTMLElement> | — |
onTouchEndCapture | TouchEventHandler<HTMLElement> | — |
onTouchMove | TouchEventHandler<HTMLElement> | — |
onTouchMoveCapture | TouchEventHandler<HTMLElement> | — |
onTouchStart | TouchEventHandler<HTMLElement> | — |
onTouchStartCapture | TouchEventHandler<HTMLElement> | — |
onPointerDown | PointerEventHandler<HTMLElement> | — |
onPointerDownCapture | PointerEventHandler<HTMLElement> | — |
onPointerMove | PointerEventHandler<HTMLElement> | — |
onPointerMoveCapture | PointerEventHandler<HTMLElement> | — |
onPointerUp | PointerEventHandler<HTMLElement> | — |
onPointerUpCapture | PointerEventHandler<HTMLElement> | — |
onPointerCancel | PointerEventHandler<HTMLElement> | — |
onPointerCancelCapture | PointerEventHandler<HTMLElement> | — |
onPointerEnter | PointerEventHandler<HTMLElement> | — |
onPointerLeave | PointerEventHandler<HTMLElement> | — |
onPointerOver | PointerEventHandler<HTMLElement> | — |
onPointerOverCapture | PointerEventHandler<HTMLElement> | — |
onPointerOut | PointerEventHandler<HTMLElement> | — |
onPointerOutCapture | PointerEventHandler<HTMLElement> | — |
onGotPointerCapture | PointerEventHandler<HTMLElement> | — |
onGotPointerCaptureCapture | PointerEventHandler<HTMLElement> | — |
onLostPointerCapture | PointerEventHandler<HTMLElement> | — |
onLostPointerCaptureCapture | PointerEventHandler<HTMLElement> | — |
onScroll | UIEventHandler<HTMLElement> | — |
onScrollCapture | UIEventHandler<HTMLElement> | — |
onScrollEnd | UIEventHandler<HTMLElement> | — |
onScrollEndCapture | UIEventHandler<HTMLElement> | — |
onWheel | WheelEventHandler<HTMLElement> | — |
onWheelCapture | WheelEventHandler<HTMLElement> | — |
onAnimationStart | AnimationEventHandler<HTMLElement> | — |
onAnimationStartCapture | AnimationEventHandler<HTMLElement> | — |
onAnimationEnd | AnimationEventHandler<HTMLElement> | — |
onAnimationEndCapture | AnimationEventHandler<HTMLElement> | — |
onAnimationIteration | AnimationEventHandler<HTMLElement> | — |
onAnimationIterationCapture | AnimationEventHandler<HTMLElement> | — |
onToggle | ToggleEventHandler<HTMLElement> | — |
onBeforeToggle | ToggleEventHandler<HTMLElement> | — |
onTransitionCancel | TransitionEventHandler<HTMLElement> | — |
onTransitionCancelCapture | TransitionEventHandler<HTMLElement> | — |
onTransitionEnd | TransitionEventHandler<HTMLElement> | — |
onTransitionEndCapture | TransitionEventHandler<HTMLElement> | — |
onTransitionRun | TransitionEventHandler<HTMLElement> | — |
onTransitionRunCapture | TransitionEventHandler<HTMLElement> | — |
onTransitionStart | TransitionEventHandler<HTMLElement> | — |
onTransitionStartCapture | TransitionEventHandler<HTMLElement> | — |
autoFocus | boolean | — |
rel | string | — |
defaultChecked | boolean | — |
defaultValue | string | number | readonly string[] | — |
suppressContentEditableWarning | boolean | — |
accessKey | string | — |
autoCapitalize | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters" | — |
contentEditable | Booleanish | "inherit" | "plaintext-only" | — |
contextMenu | string | — |
dir | string | — |
draggable | Booleanish | — |
enterKeyHint | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | — |
hidden | boolean | — |
nonce | string | — |
spellCheck | Booleanish | — |
title | string | — |
translate | "yes" | "no" | — |
radioGroup | string | — |
about | string | — |
content | string | — |
datatype | string | — |
inlist | any | — |
prefix | string | — |
property | 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" | — |
popoverTargetAction | "toggle" | "show" | "hide" | — |
popoverTarget | string | — |
inert | boolean | — |
inputMode | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | — |
is | string | — |
exportparts | string | — |
part | string | — |
onHoverStart | ((e: HoverEvent) => void) | — |
onHoverEnd | ((e: HoverEvent) => void) | — |
onHoverChange | ((isHovering: boolean) => void) | — |
children | ReactNode | ((values: GroupRenderProps & { defaultChildren: ReactNode; }) => ReactNode) | — |
className | string | ((values: GroupRenderProps & { defaultClassName: string; }) => string) | — |
style | CSSProperties | ((values: GroupRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
slot | string | null | — |
isBorderless | boolean | — |
ref | ForwardedRef<HTMLDivElement> | — |