SelectBoxGroup alpha

selectionMode

orientation

isDisabled

import {SelectBoxGroup, SelectBox, Text} from '@react-spectrum/s2'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled1 from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';
import PaperAirplane from '@react-spectrum/s2/illustrations/linear/Paperairplane';

<SelectBoxGroup
  aria-label="Select a cloud"
  styles={style({width: 'full'})}>
  <SelectBox id="aws" textValue="Amazon Web Services">
    <Server />
    <Text slot="label">Amazon Web Services</Text>
    <Text slot="description">Reliable cloud infrastructure</Text>
  </SelectBox>
  <SelectBox id="azure" textValue="Microsoft Azure">
    <AlertNotice />
    <Text slot="label">Microsoft Azure</Text>
  </SelectBox>
  <SelectBox id="gcp" textValue="Google Cloud Platform">
    <PaperAirplane />
    <Text slot="label">Google Cloud Platform</Text>
  </SelectBox>
  <SelectBox id="ibm" textValue="IBM Cloud">
    <StarFilled1 />
    <Text slot="label">IBM Cloud</Text>
    <Text slot="description">Hybrid cloud solutions</Text>
  </SelectBox>
</SelectBoxGroup>

Content

SelectBoxGroup follows the Collection Components API, accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the items prop, and a function to render the children.

import {SelectBoxGroup, SelectBox, Text} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Home from '@react-spectrum/s2/illustrations/linear/Home';
import Phone from '@react-spectrum/s2/illustrations/linear/Phone';
import MailOpen from '@react-spectrum/s2/illustrations/linear/MailOpen';

let options = [
  { id: 'address', name: 'Home address', illustration: <Home /> },
  { id: 'email', name: 'Email address', illustration: <MailOpen /> },
  { id: 'phone', name: 'Phone number', illustration: <Phone /> }
];

function Example() {

  return (
    <SelectBoxGroup
      aria-label="Contact info"
      items={options}
      selectionMode="multiple"
      styles={style({width: 'full'})}>
      {(item) => (
        <SelectBox>
          {item.illustration}
          <Text slot="label">{item.name}</Text>
        </SelectBox>
      )}
    </SelectBoxGroup>
  );
}

Selection

Use the selectionMode prop to enable single or multiple selection. The selected items can be controlled via the selectedKeys prop, matching the id prop of the items. Items can be disabled with the isDisabled prop. See the selection guide for more details.

Current selection:

selectionMode

disallowEmptySelection

import {SelectBoxGroup, SelectBox, Text, type Selection} from '@react-spectrum/s2'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled1 from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';
import PaperAirplane from '@react-spectrum/s2/illustrations/linear/Paperairplane';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set());

  return (
    <>
      <SelectBoxGroup
        {...props}
        aria-label="Select a cloud"
        selectionMode="multiple"
        selectedKeys={selected}
        onSelectionChange={setSelected}
        styles={style({width: 'full'})}>
        <SelectBox id="aws" textValue="Amazon Web Services">
          <Server />
          <Text slot="label">Amazon Web Services</Text>
          <Text slot="description">Reliable cloud infrastructure</Text>
        </SelectBox>
        <SelectBox id="azure" textValue="Microsoft Azure">
          <AlertNotice />
          <Text slot="label">Microsoft Azure</Text>
        </SelectBox>
        <SelectBox id="gcp" textValue="Google Cloud Platform">
          <PaperAirplane />
          <Text slot="label">Google Cloud Platform</Text>
        </SelectBox>
        <SelectBox id="ibm" textValue="IBM Cloud">
          <StarFilled1 />
          <Text slot="label">IBM Cloud</Text>
          <Text slot="description">Hybrid cloud solutions</Text>
        </SelectBox>
      </SelectBoxGroup>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </>
  );
}

API

<SelectBoxGroup>
  <SelectBox>
    <Illustration />
    <Text slot="label" />
    <Text slot="description" />
  </SelectBox>
</SelectBoxGroup>

SelectBoxGroup

Name	Type	Default
`orientation`	`Orientation`	Default: `'vertical'`
The layout direction of the content in each SelectBox.
`isDisabled`	`boolean`	Default: —
Whether the SelectBoxGroup is disabled.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`children`	`ReactNode`	Default: —
The SelectBox elements contained within the SelectBoxGroup.
`items`	`Iterable<T>`	Default: —
Item objects in the collection.

`selectionMode`	`'single' \| 'multiple'`	Default: `'single'`
The selection mode for the SelectBoxGroup.
`selectedKeys`	`'all' \| Iterable<Key>`	Default: —
The currently selected keys in the collection (controlled).
`defaultSelectedKeys`	`'all' \| Iterable<Key>`	Default: —
The initial selected keys in the collection (uncontrolled).
`onSelectionChange`	`(keys: Selection) => void`	Default: —
Handler that is called when the selection changes.
`disabledKeys`	`Iterable<Key>`	Default: —
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`disallowEmptySelection`	`boolean`	Default: —
Whether the collection allows empty selection.
`escapeKeyBehavior`	`'clearSelection' \| 'none'`	Default: `'clearSelection'`
Whether pressing the escape key should clear selection in the listbox or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.

SelectBox

Name	Type
`id`	`Key`
The unique id of the SelectBox.
`textValue`	`string`
A string representation of the SelectBox's contents, used for features like typeahead.
`children`	`ReactNode`
The contents of the SelectBox.
`isDisabled`	`boolean`
Whether the SelectBox is disabled.
`styles`	`StylesProp`
Spectrum-defined styles, returned by the `style()` macro.