React Chip Input Component Accesibility

Chip Input Accesibility

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.
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.
`Escape`	Clear the current input value and blur the input.