Group

A group represents a set of related UI controls, and supports interactive states for styling.

Serial number

––

label

isDisabled

isInvalid

Example

InputGroup.tsx

Example

InputGroup.tsx

import {InputGroup} from './InputGroup';
import {Input} from 'react-aria-components';

<InputGroup label="Serial number">
  <Input
    style={{width: '3ch', boxSizing: 'content-box'}}
    maxLength={3}
    aria-label="First 3 digits"
    placeholder="000" />
  –
  <Input
    style={{width: '2ch', boxSizing: 'content-box'}}
    maxLength={2}
    aria-label="Middle 2 digits"
    placeholder="00" />
  –
  <Input
    style={{width: '4ch', boxSizing: 'content-box'}}
    maxLength={4}
    aria-label="Last 4 digits"
    placeholder="0000" />
</InputGroup>

API

Name	Type
`isDisabled`	`boolean`
Whether the group is disabled.
`isReadOnly`	`boolean`
Whether the group is read only.
`children`	`ChildrenOrFunction<GroupRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-Group

Render Prop	CSS Selector
`isHovered`	CSS Selector: `[data-hovered]`
Whether the group is currently hovered with a mouse.
`isFocusWithin`	CSS Selector: `[data-focus-within]`
Whether an element within the group is focused, either via a mouse or keyboard.
`isFocusVisible`	CSS Selector: `[data-focus-visible]`
Whether an element within the group is keyboard focused.
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the group is disabled.
`isInvalid`	CSS Selector: `[data-invalid]`
Whether the group is invalid.