Chip

Beta

Compact selectable element for filters, tags, and segmented choices.

Installation

npm install @xaui/native

Import

import { Chip, ChipGroup, ChipItem } from '@xaui/native/chip'

Basic Usage

Minimal example showing the component with its default configuration.

import { Chip } from '@xaui/native/chip'

export function Example() {
  return <Chip />
}

Variants

All seven visual styles.

import { Chip } from '@xaui/native/chip'
import { Row } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Row gap={8} flexWrap="wrap">
      <Chip variant="solid" themeColor="primary">Solid</Chip>
      <Chip variant="bordered" themeColor="primary">Bordered</Chip>
      <Chip variant="light" themeColor="primary">Light</Chip>
      <Chip variant="flat" themeColor="primary">Flat</Chip>
      <Chip variant="faded" themeColor="primary">Faded</Chip>
      <Chip variant="shadow" themeColor="primary">Shadow</Chip>
      <Chip variant="dot" themeColor="primary">Dot</Chip>
    </Row>
  )
}

Sizes

Three sizes: sm (32px), md (40px), lg (44px).

import { Chip } from '@xaui/native/chip'
import { Row } from '@xaui/native/view'

export function SizesExample() {
  return (
    <Row gap={8} alignItems="center">
      <Chip size="sm" themeColor="primary">Small</Chip>
      <Chip size="md" themeColor="primary">Medium</Chip>
      <Chip size="lg" themeColor="primary">Large</Chip>
    </Row>
  )
}

Closable

Providing onClose renders a close button; the chip animates out when pressed.

import { useState } from 'react'
import { Chip } from '@xaui/native/chip'
import { Row } from '@xaui/native/view'

const TAGS = ['React Native', 'TypeScript', 'Expo', 'Tailwind']

export function ClosableExample() {
  const [tags, setTags] = useState(TAGS)

  return (
    <Row gap={8} flexWrap="wrap">
      {tags.map(tag => (
        <Chip
          key={tag}
          themeColor="primary"
          onClose={() => setTags(prev => prev.filter(t => t !== tag))}
        >
          {tag}
        </Chip>
      ))}
    </Row>
  )
}

With Avatar

Show an avatar at the leading edge.

import { Chip } from '@xaui/native/chip'
import { Avatar } from '@xaui/native/avatar'
import { Row } from '@xaui/native/view'

export function WithAvatarExample() {
  return (
    <Row gap={8}>
      <Chip avatar={<Avatar label="JD" size="sm" />} themeColor="primary">
        Jane Doe
      </Chip>
      <Chip avatar={<Avatar label="JS" size="sm" />} themeColor="secondary">
        John Smith
      </Chip>
    </Row>
  )
}

Theme Colors

Apply any design system color.

import { Chip } from '@xaui/native/chip'
import { Row } from '@xaui/native/view'

export function ThemeColorsExample() {
  return (
    <Row gap={8} flexWrap="wrap">
      <Chip themeColor="primary">Primary</Chip>
      <Chip themeColor="secondary">Secondary</Chip>
      <Chip themeColor="success">Success</Chip>
      <Chip themeColor="danger">Danger</Chip>
      <Chip themeColor="warning">Warning</Chip>
    </Row>
  )
}

Single Selection (ChipGroup)

Use ChipGroup with isSelectable and selectMode="single".

import { useState } from 'react'
import { ChipGroup, ChipItem } from '@xaui/native/chip'

export function SingleSelectionExample() {
  const [selected, setSelected] = useState<string[]>(['react-native'])

  return (
    <ChipGroup
      isSelectable
      selectMode="single"
      themeColor="primary"
      selectedValues={selected}
      onSelectionChange={setSelected}
    >
      <ChipItem value="react-native">React Native</ChipItem>
      <ChipItem value="flutter">Flutter</ChipItem>
      <ChipItem value="ionic">Ionic</ChipItem>
      <ChipItem value="xamarin">Xamarin</ChipItem>
    </ChipGroup>
  )
}

Multiple Selection (ChipGroup)

Allow any number of chips to be selected simultaneously.

import { useState } from 'react'
import { ChipGroup, ChipItem } from '@xaui/native/chip'

export function MultipleSelectionExample() {
  const [selected, setSelected] = useState<string[]>([])

  return (
    <ChipGroup
      isSelectable
      selectMode="multiple"
      themeColor="secondary"
      selectedValues={selected}
      onSelectionChange={setSelected}
    >
      <ChipItem value="ts">TypeScript</ChipItem>
      <ChipItem value="js">JavaScript</ChipItem>
      <ChipItem value="python">Python</ChipItem>
      <ChipItem value="go">Go</ChipItem>
      <ChipItem value="rust">Rust</ChipItem>
    </ChipGroup>
  )
}