Skip to content
On this page

ChipInput

A ChipInput allows users to create chips to filter content or make selections. Chips are created by typing characters or words and pressing the Enter key.

Guidelines

Using chip inputs

The ChipInput component utilizes a TextInput, enabling users to filter information by typing text that transforms into a chip. These chips can be edited by clicking directly on them or removed by interacting with the embedded remove button within each chip.

Use the ChipInput when users need to simplify a complex filtering process or when they need to edit the filters applied there.

Avoid using ChipInput if the filtering process is simple and doesn't require custom edits. In case you need to select static options that don't require editing, consider using a Checkbox group instead.

Example of a Codex ChipInput with two chips within the input.

Specifications

Specification of ChipInput.

ChipInputs include the following items:

  1. TextInput
    The user can type letters or words within this input to create the chips and filter the information.
  2. Chip or chips
    The chip or chips created are stacked next to each other, and they are editable and can be removed.

Refer to the ChipInput component in Codex Figma.

Types

Depending on the placement of the chips, there are two types of ChipInput:

  1. Chips within the input field
    In this case, when the chips are created they are placed next to the input’s placeholder text, and they are stacked next to each other.
  2. Chips separated from the input field
    In this case, the chips are placed in a light gray box above the input field once they are created.

Chip input type based on chip placement: chips within the input or chips separated from the input.

Interaction states

ChipInput has the following visually separate states:

Interaction states of ChipInput: default, hover on input, focus-active, filled, disabled, hover on chip’s remove button, error default, error focus, error filled, hover on editable chip,focus on editable chip and chip being edited.

  1. Default
  2. Hover on input
  3. Focus or active
  4. Filled
  5. Disabled
  6. Hover on chip’s remove button
  7. Error default
  8. Error focus
  9. Error filled
  10. Hover on editable chip
  11. Focused editable chip
  12. Editing the chip

Demos

Configurable

chip 1
chip 2
NameValue
Props
chipAriaDescription
separateInput
status
disabled
View
Reading direction

Basic Usage

Pass an array of chip data to the input using v-model:input-chips. When the user adds or removes a chip, the array will automatically be updated.

Text for the aria-label of each chip's "remove" button is a required prop.

chip 1
chip 2

With icons

Chips added by the user cannot be added with icons, but icons can be included in chips provided by the parent component.

Camera
Article

With placeholder

Placeholder and other attributes of the <input> element can be bound to the ChipInput component and will be passed down to the <input> element within.

Disabled

chip 1
chip 2

Form field

A ChipInput can be wrapped in the Field component to add features like a semantic label, description and help text, validation messages, and more. See the Field page for more information.

Alternative names help others easily find the function

Vue usage

Attributes passed to input

This component will pass any HTML attributes applied to it, except for CSS class, to the <input> element within the component.

Props

Prop nameDescriptionTypeValuesDefault
chipAriaDescription(required)aria-description of each input chip.

Text must be provided for accessibility purposes. This prop is temporary and will be removed once T345386 is resolved.
string-
inputChips(required)Current chips present in the input.

Provided by v-model binding in the parent component.
ChipInputItem[]-
separateInputWhether the text input should appear below the set of input chips.

By default, the input chips are inline with the input.
boolean-false
statusstatus attribute of the input.ValidationStatusType'default', 'error''default'
disabledWhether the input is disabled.boolean-false

Events

Event namePropertiesDescription
update:input-chipsinputChips ChipInputItem[] - The new set of inputChipsWhen the input chips change.