InputChip

@coinbase/cds-web@8.34.1

A Chip used for removable selections.

Import

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

SourceView source codeFigmaView Figma (internal only)

---

Related components

• Chip,
• SelectChip

---

󰏖

View as Markdown

Basic usage

Loading...

󰙡

Live Code

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

With Custom Start Element

Loading...

󰙡

Live Code

function Example() {
  return (
    <VStack gap={2}>
      <HStack gap={2}>
        <InputChip
          onClick={() => console.log('Remove Star')}
          value="With Icon"
          start={<Icon name="star" />}
        />
      </HStack>
      <HStack gap={2}>
        <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>
  );
}

With Custom Accessibility Label

Loading...

󰙡

Live Code

function Example() {
  return (
    <HStack gap={2}>
      <InputChip
        onClick={() => console.log('Remove Custom')}
        value="Custom Label"
        accessibilityLabel="Custom remove action"
      />
    </HStack>
  );
}