CodexChipInput
Input for an array of items.
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.
Demos
Configurable
| Name | Value |
|---|---|
| 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.
With icons
Chips added by the user cannot be added with icons, but icons can be included in chips provided by the parent component.
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
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.
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
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[] | - | |
separateInput | Whether the text input should appear below the set of input chips. By default, the input chips are inline with the input. | boolean | - | false |
status | status attribute of the input. | ValidationStatusType | 'default', 'error' | 'default' |
disabled | Whether the input is disabled. | boolean | - | false |
Events
| Event name | Properties | Description |
|---|---|---|
update:input-chips | inputChips ChipInputItem[] - The new set of inputChips | When the input chips change. |