Chip input

The ChipInput component is used to render a dismissable chip that is used in inputs. Pressing Backspace or clicking the ChipDeleteButton with the focus on the ChipInput will trigger the onDelete event.

Source@atlas-ui/chipFigmaDesign guidelines

Import

import { ChipInput } from "@atlas-ui/react";

• ChipInput: component that renders a chip that is dismissible and exposes the onDelete event.

Usage

Chip sub-components

Atlas UI provides a list of sub-components that can be used within the ChipInput component, to provide a label and an icon. The ChipInput must wrap the ChipContent, ChipLabel, ChipIcon and ChipDeleteButton sub-components to achieve the basic appearance.

Basic

The ChipInput component renders a dismissable chip.

Label

<ChipInput>
  <ChipContent>
    <ChipIcon />
    <ChipLabel>Label</ChipLabel>
  </ChipContent>
  <ChipDeleteButton/>
</ChipInput>

Editable example

States

Disabled state

The ChipInput component can be disabled by passing in the isDisabled prop.

Label

<ChipInput isDisabled>
  <ChipContent>
    <ChipIcon />
    <ChipLabel>Label</ChipLabel>
  </ChipContent>
  <ChipDeleteButton/>
</ChipInput>

Editable example

Invalid state

The ChipInput component can be invalidated by passing in the isInvalid prop. When invalid, the ChipInput will show an alert icon.

Label

<ChipInput isInvalid>
  <ChipContent>
    <ChipIcon />
    <ChipLabel>Label</ChipLabel>
  </ChipContent>
  <ChipDeleteButton/>
</ChipInput>

Editable example

Events

onDelete

The ChipInput can trigger the onDelete event by clicking the ChipDeleteButton or pressing the Backspace key when the chip is focused.

Label

<ChipInput onDelete={alert}>
  <ChipContent>
    <ChipIcon />
    <ChipLabel>Label</ChipLabel>
  </ChipContent>
  <ChipDeleteButton/>
</ChipInput>

Editable example

Props

ChipInput Props

Prop	Default	Type
isDisabled	false	boolean Determines if the Chip is disabled. A disabled chip cannot be pressed or deleted.
isInvalid	false	boolean Determines if the Chip is invalid. This only affects the visual appearance and the accessibility attributes.
onDelete	-	(event: KeyboardEvent<HTMLDivElement>) => (e: PressEvent) => void The callback that is triggered when the delete button is pressed, or when backspace is pressed while the chip is focused.