InputChip

@coinbase/cds-web@9.0.2

A Chip used for removing selected values.

import { InputChip } from '@coinbase/cds-web/chips/InputChip'

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• Chip,
• SelectChip

InputChip is built for remove actions. For other uses, see Chip which supports interaction.

Basics

Use onClick for remove behavior.

Loading...

󰙡

Live Code

function Example() {
  const [selectedValues, setSelectedValues] = React.useState(['BTC', 'ETH', 'SOL']);

  return (
    <HStack gap={2} flexWrap="wrap">
      {selectedValues.map((value) => (
        <InputChip
          key={value}
          onClick={() => setSelectedValues((current) => current.filter((item) => item !== value))}
          value={value}
        />
      ))}
    </HStack>
  );
}

Disabled

Use disabled when the value should stay visible but not removable.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <InputChip onClick={() => console.log('Remove Basic')} value="Basic Chip" />
      <InputChip disabled onClick={() => {}} value="Disabled Chip" />
    </HStack>
  );
}

Styling

With start content

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack gap={2}>
      <HStack gap={2} flexWrap="wrap">
        <InputChip
          onClick={() => console.log('Remove Star')}
          value="With Icon"
          start={<Icon name="star" />}
        />
      </HStack>
      <HStack gap={2} flexWrap="wrap">
        <InputChip
          onClick={() => console.log('Remove BTC')}
          value="BTC"
          start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
        />
        <InputChip
          onClick={() => console.log('Remove ETH')}
          value="ETH"
          start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
        />
      </HStack>
    </VStack>
  );
}

Compact

Use compact to reduce chip height and spacing in dense layouts.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <InputChip onClick={() => console.log('Remove Default')} value="Default" />
      <InputChip compact onClick={() => console.log('Remove Compact')} value="Compact" />
    </HStack>
  );
}

Invert color scheme

Use invertColorScheme to emphasize removable values.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <InputChip onClick={() => console.log('Remove Default')} value="Default" />
      <InputChip
        invertColorScheme
        onClick={() => console.log('Remove Inverted')}
        value="Inverted"
      />
    </HStack>
  );
}

Accessibility

InputChip defaults to a remove label (Remove ${children} for string content, otherwise Remove option). Override accessibilityLabel when you need more specific wording.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <InputChip onClick={() => console.log('Remove BTC')} value="BTC" />
      <InputChip
        onClick={() => console.log('Remove Custom')}
        value="Custom Label"
        accessibilityLabel="Remove custom selection"
      />
    </HStack>
  );
}