InputChip

@coinbase/cds-web@9.17.0

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>
  );
}

Sizes

size accepts xs and s. Defaults to s.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <InputChip onClick={() => {}}>s (default)</InputChip>
      <InputChip onClick={() => {}} size="xs">
        xs
      </InputChip>
    </HStack>
  );
}

Active

InputChip is active by default. Set active={false} for a less emphasized appearance.

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2} flexWrap="wrap">
      <InputChip onClick={() => console.log('Remove Active')} value="Active (default)" />
      <InputChip active={false} onClick={() => console.log('Remove Inactive')} value="Inactive" />
    </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>
  );
}