Select
- Stable
- WCAG 2.2 evidence
- RTL
A selected value shown as a tag, for example in the trigger of a multi-select Select. Built on
React Aria Tag inside a {@link SelectTagGroup}: a focusable row of a grid, reached with Tab and the arrow keys.
When the group has onRemove, the tag shows the Figma Remove button (Icon/LuX) named "Remove <label>" in the
user's language by React Aria, and Delete or Backspace on the focused tag removes it too (WCAG 2.1.1, 4.1.2). The
remove button has a 24 px target (2.5.8). Use Badge for statuses and FilterChip for filters.
import { SelectTag } from "@nexera-ui/react";- 4
- examples
- 20
- props
- 2
- live controls
- 1
- platform
- 6
- 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 { SelectTag } from "@nexera-ui/react";
<SelectTag />Examples 3
The same examples as Storybook, rendered live. Open Code to copy one.
Removable
Removable tags in a SelectTagGroup: Tab reaches the group, the arrow keys move between tags, Delete or Backspace and the remove button remove a tag. Select with selectionMode="multiple" renders these in its field.
import { useState } from "react";
import { SelectTag, SelectTagGroup } from "@nexera-ui/react";
export function Removable() {
function Example() {
const [skills, setSkills] = useState([
{ id: "figma", name: "Figma" },
{ id: "react", name: "React" },
{ id: "a11y", name: "Accessibility" },
{ id: "i18n", name: "Localisation" },
]);
return (
<div className="w-80 max-w-full">
<SelectTagGroup
aria-label="Selected skills"
items={skills}
onRemove={(keys) => {
setSkills((current) => current.filter((skill) => !keys.has(skill.id)));
}}
>
{(skill) => <SelectTag id={skill.id} label={skill.name} />}
</SelectTagGroup>
</div>
);
}
return <Example />;
}
Display only
Display-only tags (no onRemove) and a disabled tag.
import { SelectTag, SelectTagGroup } from "@nexera-ui/react";
export function DisplayOnly() {
return (
<SelectTagGroup aria-label="Teams" disabledKeys={["sales"]}>
<SelectTag id="eng" label="Engineering" />
<SelectTag id="design" label="Design" />
<SelectTag id="sales" label="Sales" />
</SelectTagGroup>
);
}
Long label and rtl
Long labels wrap inside the tag; right-to-left mirrors padding and arrow keys.
import { SelectTag, SelectTagGroup } from "@nexera-ui/react";
export function LongLabelAndRtl() {
return (
<div className="w-56">
<SelectTagGroup aria-label="المهارات" onRemove={() => undefined}>
<SelectTag id="a" label="البحث والتطوير وضمان الجودة للمنصات المحمولة" />
<SelectTag id="b" label="التصميم" />
</SelectTagGroup>
</div>
);
}
Props 20
Press "Try it" on a card to load that prop into the playground.
20 props shown
label*NexeraReactNodeVisible label, usually the label of the selected option. Wraps instead of truncating. When it
is not a plain string, also pass textValue.
classNameNexerastringExtra classes, merged last so they win over the defaults.
styleNexeraCSSPropertiesInline style.
idReact AriaKeyA unique id for the tag.
textValueReact AriastringA string representation of the tags's contents, used for accessibility. Required if children is not a plain text string.
isDisabledReact AriabooleanWhether the tag is disabled.
onActionReact Aria() => voidHandler that is called when a user performs an action on the item. The exact user event depends
on the collection's selectionBehavior prop and the interaction modality.
hrefReact AriastringA URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
hrefLangReact AriastringHints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
targetReact AriaHTMLAttributeAnchorTargetThe target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
relReact AriastringThe relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
downloadReact Ariastring | booleanCauses the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
pingReact AriastringA space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
referrerPolicyReact Aria"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
routerOptionsReact ArianeverOptions for the configured client side router.
onPressReact Aria(e: PressEvent) => voidHandler that is called when the press is released over the target.
onPressStartReact Aria(e: PressEvent) => voidHandler that is called when a press interaction starts.
onPressEndReact Aria(e: PressEvent) => voidHandler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressChangeReact Aria(isPressed: boolean) => voidHandler that is called when the press state changes.
onPressUpReact Aria(e: PressEvent) => voidHandler that is called when a press is released over the target, regardless of whether it started on the target or not.
* 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
4 direct · 2 supporting- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.4.12Text SpacingLevel AA · supporting test
- 2.1.1KeyboardLevel A · tested directly
- 2.4.7Focus VisibleLevel AA · supporting test
- 2.5.8Target Size (Minimum)Level AA · 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:.
data-disableddata-hovereddata-pressed
<SelectTag className="data-disabled:opacity-90 shadow-sm" />Used in blocks
No block uses SelectTag 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.