This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Chip

Jetpack Compose Chip components for displaying compact elements.

Android

Expo UI Chips match the official Jetpack Compose Chip API. Each chip type is a separate component: AssistChip, FilterChip, InputChip, and SuggestionChip.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Assist chip

Assist chips help users take actions or start tasks, such as booking a flight or opening a map. They often appear as temporary UI elements in response to user input.

AssistChipExample.tsx

import { Host, AssistChip, Icon, Text } from '@expo/ui/jetpack-compose';

export default function AssistChipExample() {
  return (
    <Host matchContents>
      <AssistChip onClick={() => console.log('Opening flight booking...')}>
        <AssistChip.Label>
          <Text>Book Flight</Text>
        </AssistChip.Label>
        <AssistChip.LeadingIcon>
          <Icon source={require('./assets/flight.xml')} size={18} />
        </AssistChip.LeadingIcon>
      </AssistChip>
    </Host>
  );
}

Filter chip

Filter chips allow users to refine content from a set of options. They support a selected state and are commonly used in search bars or content filtering.

FilterChipExample.tsx

import { useState } from 'react';
import { Host, FilterChip, Text } from '@expo/ui/jetpack-compose';

export default function FilterChipExample() {
  const [selected, setSelected] = useState(false);

  return (
    <Host matchContents>
      <FilterChip selected={selected} onClick={() => setSelected(!selected)}>
        <FilterChip.Label>
          <Text>Images</Text>
        </FilterChip.Label>
      </FilterChip>
    </Host>
  );
}

Input chip

Input chips represent discrete pieces of information entered by a user, such as tags in a text field. They support avatars, trailing icons, and can be dismissed.

InputChipExample.tsx

import { useState } from 'react';
import { Host, InputChip, Icon, Text, FlowRow } from '@expo/ui/jetpack-compose';

export default function InputChipExample() {
  const [chips, setChips] = useState(['Work', 'Travel', 'News']);

  return (
    <Host matchContents>
      <FlowRow horizontalArrangement={{ spacedBy: 8 }}>
        {chips.map(label => (
          <InputChip
            key={label}
            selected
            onClick={() => setChips(prev => prev.filter(c => c !== label))}>
            <InputChip.Label>
              <Text>{label}</Text>
            </InputChip.Label>
            <InputChip.TrailingIcon>
              <Icon source={require('./assets/close.xml')} size={18} />
            </InputChip.TrailingIcon>
          </InputChip>
        ))}
      </FlowRow>
    </Host>
  );
}

Suggestion chip

Suggestion chips help narrow a user's intent by presenting dynamically generated suggestions, such as quick-reply options in a chat or search refinements.

SuggestionChipExample.tsx

import { Host, SuggestionChip, Text } from '@expo/ui/jetpack-compose';

export default function SuggestionChipExample() {
  return (
    <Host matchContents>
      <SuggestionChip onClick={() => console.log('Searching nearby...')}>
        <SuggestionChip.Label>
          <Text>Nearby</Text>
        </SuggestionChip.Label>
      </SuggestionChip>
    </Host>
  );
}

API

import { AssistChip, FilterChip, InputChip, SuggestionChip } from '@expo/ui/jetpack-compose';

Components

`AssistChip`

Android

Type: React.Element<AssistChipProps>

An assist chip that helps users complete actions and primary tasks.

AssistChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label, LeadingIcon, and TrailingIcon slots.

`colors`

Android

Optional • Type: AssistChipColors

Colors for the chip's container, label, and icons.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be clicked.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

`FilterChip`

Android

Type: React.Element<FilterChipProps>

A filter chip component for refining content with selection/deselection.

FilterChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label, LeadingIcon, and TrailingIcon slots.

`colors`

Android

Optional • Type: FilterChipColors

Colors for the chip's container, label, icon, and selected states.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean

Whether the chip is enabled and can be interacted with.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

`selected`

Android

Type: boolean

Whether the chip is currently selected.

`InputChip`

Android

Type: React.Element<InputChipProps>

An input chip that represents user input and can be dismissed.

InputChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label, Avatar, and TrailingIcon slots.

`colors`

Android

Optional • Type: InputChipColors

Colors for the chip's container, label, icons, and selected states.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be interacted with.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

`selected`

Android

Optional • Type: boolean • Default: false

Whether the chip is selected.

`SuggestionChip`

Android

Type: React.Element<SuggestionChipProps>

A suggestion chip that offers contextual suggestions and recommendations.

SuggestionChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label and Icon slots.

`colors`

Android

Optional • Type: SuggestionChipColors

Colors for the chip's container, label, and icon.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be clicked.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

Types

`AssistChipColors`

Android

Colors for AssistChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-
leadingIconContentColor(optional)	`ColorValue`	-
trailingIconContentColor(optional)	`ColorValue`	-

`ChipBorder`

Android

Border configuration for chips.

Property	Type	Description
color(optional)	`ColorValue`	Border color.
width(optional)	`number`	Border width in dp. Default:`1`

`FilterChipColors`

Android

Colors for FilterChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
iconColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-
selectedContainerColor(optional)	`ColorValue`	-
selectedLabelColor(optional)	`ColorValue`	-
selectedLeadingIconColor(optional)	`ColorValue`	-
selectedTrailingIconColor(optional)	`ColorValue`	-

`InputChipColors`

Android

Colors for InputChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-
leadingIconColor(optional)	`ColorValue`	-
selectedContainerColor(optional)	`ColorValue`	-
selectedLabelColor(optional)	`ColorValue`	-
selectedLeadingIconColor(optional)	`ColorValue`	-
selectedTrailingIconColor(optional)	`ColorValue`	-
trailingIconColor(optional)	`ColorValue`	-

`SuggestionChipColors`

Android

Colors for SuggestionChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
iconContentColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-