Skip to Content
ComponentsChips

Chips

The Chips component represents small interactive elements for filtering, selection, or actions.

Anatomy

Import all parts and piece them together.

import { Chips } from '@xsolla-zk/react'
 
export default () => (
  <Chips>
    <Chips.Item>
      <Chips.Item.Text>
        {/* text */}
      </Chips.Item.Text>
      <Chips.Item.Icon />
    </Chips.Item>
  </Chips>
)

Examples

Basic example

import { Chips } from '@xsolla-zk/react'
import { ArrowRight } from '@xsolla-zk/icons'
 
function App() {
  return (
    <Chips>
      <Chips.Item value="1">
        <Chips.Item.Text>Chip</Chips.Item.Text>
        <Chips.Item.Icon icon={ArrowRight} />
      </Chips.Item>
      <Chips.Item value="2">
        <Chips.Item.Text>Chip</Chips.Item.Text>
        <Chips.Item.Icon icon={ArrowRight} />
      </Chips.Item>
    </Chips>
  )
}

API

Chips Props

Chips extends Tamagui stack views inheriting all standard props, plus:

PropTypeDefaultDescription

| value | ChipsValue | undefined | Chip value | | defaultValue | ChipsValue | undefined | Chip default value | | onValueChange | (value: ChipsValue) => void | undefined | Chip value change handler | | singleMode | boolean | false | Single mode | | multiselect | boolean | false | Multiselect mode | | variant | ChipVariants | 'brand' | Chip variant | | size | ChipsSizes | '$500' | Chip size |

Chips.Text Props

Component for displaying chip text.

Chips.Icon Props

Component for displaying chip icon.

Chips.Action Props

Component for interactive actions (e.g., removal).

Accessibility

  • Supports keyboard navigation
  • Works correctly with screen readers
  • Supports ARIA attributes for states
CheckboxDialog