React Chip Input Component Accessibility

Chip Input Accessibility

Detailed overview of the accessibility and keyboard support features implemented in the CoreUI React Chip Input component.

On this page

Accessible React Chip Input

Chip inputs are commonly used for tags, labels, recipients, and tokenized multi-value entry. When used in forms, they should remain keyboard accessible, clearly labeled, and understandable to assistive technologies. This guide explains how CoreUI React Chip Input supports accessible usage patterns.

Semantic Structure

Inline text input: CChipInput renders a real text input for entering new values, which keeps typing, focus, and screen reader behavior predictable.
Chip list pattern: Existing values are rendered as chips before the inline input, making the field readable as a tokenized sequence of values.
Form compatibility: When name is provided, a hidden input is rendered so chip values can participate in traditional form submission.

ARIA Attributes

CoreUI React Chip Input supports accessible labeling and chip state communication:

External labels: Associate the input with a <label> using id and htmlFor for clear screen reader context.
Chip selection state: Selectable chips expose aria-selected through the underlying CChip component.
Remove buttons: Each remove button is named with ariaRemoveLabel and the chip’s value, Remove <value> by default. Put {label} where the value goes, or pass a function of the value for another word order.
Announcements: Adding and removing chips is announced through announce() in the live region of the page, or of the modal dialog around the field, one message per update: the values the field did not hold before, or else the values it no longer holds, joined with commas as in Vue, Svelte added. Customize the wording with the ariaAddedAnnouncement and ariaRemovedAnnouncement props. A function in place of the word receives the values and returns the whole message, so a page can put the word first, agree it with the number of chips or give a count for a long list, as in (values) => values.length > 3 ? values.length + ' chips added' : values.join(', ') + ' added'.
Disabled and readonly states: Disabled and readonly states are reflected so assistive technologies can identify interaction constraints.

Focus Management

Input-first workflow: Users can type directly into the inline input without extra setup.
Chip navigation: When the input is empty, keyboard navigation can move focus to chips for selection or removal.
Selectable chips: Focusable chips can be traversed with arrow keys once focus enters the chip list.

Visual Indicators

Visible focus states: The input and focusable chips provide visible focus styles for keyboard users.
Selected chips: Active chips are visually differentiated when selectable is enabled.
Disabled and readonly styling: Reduced emphasis communicates when the field or chips are not editable.

Keyboard Support

The React Chip Input component supports keyboard interaction for both the input and the rendered chips:

Key	Function
`Enter`	Create a chip from the current input value.
`,` or separator key	Create a chip from the current input value when a separator is configured.
`Backspace` or `Delete`	When the input is empty, move focus to the last chip. When a removable chip is focused, remove it.
`Left Arrow`	When the caret is at the start of the input, move focus to the last chip. When a chip is focused, move to the previous chip.
`Right Arrow`	When a chip is focused, move to the next chip.
`Space` or `Enter` on a chip	Toggle selected state when `selectable` is enabled.
`Home`	Move focus to the first focusable chip.
`End`	Move focus to the last focusable chip.
`Shift` + `Left Arrow` / `Right Arrow`	Move focus and add the chip it lands on to the selection (`selectable`, `selectionMode="multiple"`).
`Shift` + `Home` / `End`	Extend the selection to the first or last chip (`selectable`, `selectionMode="multiple"`).
`Ctrl` / `Cmd` + `A`	Select every chip (`selectable`, `selectionMode="multiple"`).
`Escape`	Clear the current input value and blur the input.