Select
- Stable
- WCAG 2.2 evidence
- RTL
- Web · iOS · Android
Heading of a group of options. Render it as the first child of a SelectSection: React Aria then labels the section's group
with it, so screen readers announce the group name when focus enters it (WCAG 1.3.1, 4.1.2). It is not focusable and
the arrow keys skip it. Use group labels in long lists with natural categories; skip them in single-group lists.
import { SelectGroupLabel } from "@nexera-ui/react";- 4
- examples
- 3
- props
- 2
- live controls
- 3
- platforms
- 5
- WCAG criteria
- 0
- blocks use it
Try every prop. Copy the code.
Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.
import { SelectGroupLabel } from "@nexera-ui/react";
<SelectGroupLabel />Examples 3
The same examples as Storybook, rendered live. Open Code to copy one.
Groups
Two groups, as the Figma Combobox listbox Type=Grouped shows them; the arrow keys skip the labels.
import { ListBox } from "react-aria-components";
import { SelectGroupLabel, SelectOption, SelectSection, cn } from "@nexera-ui/react";
import { LuBuilding2, LuMapPin } from "react-icons/lu";
function Grouped({
platform = "web",
offices = "Offices",
}: {
platform?: Platform;
offices?: string;
}) {
return (
<div data-platform={platform} className={cn(selectPopoverStyles(), "w-80 max-w-full")}>
<SelectPlatformContext.Provider value={platform}>
<ListBox
aria-label={`Location (${platform})`}
selectionMode="single"
data-platform={platform}
className={selectListBoxStyles()}
>
<SelectSection>
<SelectGroupLabel label={offices} />
<SelectOption id="lahore" label="Lahore HQ" leading={<LuBuilding2 />} />
<SelectOption id="dubai" label="Dubai office" leading={<LuBuilding2 />} />
</SelectSection>
<SelectSection>
<SelectGroupLabel label="Cities" />
<SelectOption id="karachi" label="Karachi" leading={<LuMapPin />} />
<SelectOption id="istanbul" label="Istanbul" leading={<LuMapPin />} />
</SelectSection>
</ListBox>
</SelectPlatformContext.Provider>
</div>
);
}
const Groups = { render: () => <Grouped /> };
Platforms
iOS and Android lists: the label lines up with the 16 px mobile option padding.
import { ListBox } from "react-aria-components";
import { SelectGroupLabel, SelectOption, SelectSection, cn } from "@nexera-ui/react";
import { LuBuilding2, LuMapPin } from "react-icons/lu";
function Grouped({
platform = "web",
offices = "Offices",
}: {
platform?: Platform;
offices?: string;
}) {
return (
<div data-platform={platform} className={cn(selectPopoverStyles(), "w-80 max-w-full")}>
<SelectPlatformContext.Provider value={platform}>
<ListBox
aria-label={`Location (${platform})`}
selectionMode="single"
data-platform={platform}
className={selectListBoxStyles()}
>
<SelectSection>
<SelectGroupLabel label={offices} />
<SelectOption id="lahore" label="Lahore HQ" leading={<LuBuilding2 />} />
<SelectOption id="dubai" label="Dubai office" leading={<LuBuilding2 />} />
</SelectSection>
<SelectSection>
<SelectGroupLabel label="Cities" />
<SelectOption id="karachi" label="Karachi" leading={<LuMapPin />} />
<SelectOption id="istanbul" label="Istanbul" leading={<LuMapPin />} />
</SelectSection>
</ListBox>
</SelectPlatformContext.Provider>
</div>
);
}
export function Platforms() {
return (
<div className="flex flex-wrap items-start gap-8">
<Grouped platform="ios" />
<Grouped platform="android" />
</div>
);
}
Long label and rtl
Long labels wrap; right-to-left mirrors the padding.
import { ListBox } from "react-aria-components";
import { SelectGroupLabel, SelectOption, SelectSection, cn } from "@nexera-ui/react";
import { LuBuilding2, LuMapPin } from "react-icons/lu";
function Grouped({
platform = "web",
offices = "Offices",
}: {
platform?: Platform;
offices?: string;
}) {
return (
<div data-platform={platform} className={cn(selectPopoverStyles(), "w-80 max-w-full")}>
<SelectPlatformContext.Provider value={platform}>
<ListBox
aria-label={`Location (${platform})`}
selectionMode="single"
data-platform={platform}
className={selectListBoxStyles()}
>
<SelectSection>
<SelectGroupLabel label={offices} />
<SelectOption id="lahore" label="Lahore HQ" leading={<LuBuilding2 />} />
<SelectOption id="dubai" label="Dubai office" leading={<LuBuilding2 />} />
</SelectSection>
<SelectSection>
<SelectGroupLabel label="Cities" />
<SelectOption id="karachi" label="Karachi" leading={<LuMapPin />} />
<SelectOption id="istanbul" label="Istanbul" leading={<LuMapPin />} />
</SelectSection>
</ListBox>
</SelectPlatformContext.Provider>
</div>
);
}
export function LongLabelAndRtl() {
return <Grouped offices="المكاتب الإقليمية في باكستان والخليج وتركيا" />;
}
Props 3
Press "Try it" on a card to load that prop into the playground.
3 props shown
label*NexeraReactNodeVisible heading of the group, for example "Offices". It names the section's group.
platformNexera"web" | "ios" | "android"Platform look. Figma has a group label for web only; on iOS and Android the padding follows the option rows.
Defaults to the platform of the enclosing Select or Combobox, then of the NexeraProvider.
classNameNexerastringExtra classes, merged last so they win over the defaults.
* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.
Accessible by default.
Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.
WCAG 2.2 evidence
3 direct · 2 supporting- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.4.10ReflowLevel AA · supporting test
- 1.4.12Text SpacingLevel AA · supporting test
- 2.1.1KeyboardLevel A · tested directly
- 4.1.2Name, Role, ValueLevel A · tested directly
Fits any width.
Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.
Styling hooks
Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.
<SelectGroupLabel className="shadow-sm" />Used in blocks
No block uses SelectGroupLabel yet.
Related components
- CalendarDayOne day of a {@link CalendarMonth } grid, built on React Aria `CalendarCell`: a `gridcell` whose button is named by the full, localised date ("Wednesday, October 14, 2026"), with `aria-selected`, `aria-disabled` and the "today" and range descriptions read by screen readers (WCAG 1.3.1, 4.1.2).
- CalendarMonthA month calendar for picking a date or a date range: header with previous / next buttons and the localised month name, weekday row, and six weeks of `CalendarDay`s.
- CheckboxThe bare 18 px checkbox: one independent yes/no choice applied on submit, or a row selector in a table, list or tree.
- CheckboxCardA large checkbox option with an icon, a title and a description, for a few options that need explanation (notification channels, benefits).
- CheckboxFieldA checkbox with a label and optional helper text: the box (the same element as `Checkbox`) followed by the label and description, applied on submit.
- ColorInputA hex colour field with a swatch and a picker popover.
- ColorPickerPicks a colour.
- ColorTokenCardDocumentation card for one colour token: a 96 px colour sample with an "Aa" text sample, then the name, token path, hex value and contrast note as text.