Chip

Chips help people enter information, make selections, filter content, or trigger actions. Follows the Material Design 3 Chip specification.

Usage

Open on Snack ↗

import { Chip } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Alert, View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Chip variant="assist" onPress={() => Alert.alert('Pressed')}>
            Assist
          </Chip>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Variants

Variant	Use case
assist	Smart or automated actions
filter	Filter content, toggle on/off
input	User-entered info like tags
suggestion	Dynamic suggestions

Elevated

Available on assist, filter, and suggestion variants. Ignored on input.

Open on Snack ↗

import { Chip } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Chip variant="assist" elevated onPress={() => {}}>Elevated Assist</Chip>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Filter Chips

Filter chips support a selected state. When selected, a checkmark icon appears automatically.

Open on Snack ↗

import { Chip } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [active, setActive] = useState(true)
  const [inactive, setInactive] = useState(false)
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <Chip variant="filter" selected={active} onPress={() => setActive(!active)}>Active</Chip>
          <Chip variant="filter" selected={inactive} onPress={() => setInactive(!inactive)}>Inactive</Chip>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Close / Remove

Pass onClose to show a trailing close icon. Only renders on input and filter (when selected) variants.

Open on Snack ↗

import { Chip } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Alert, View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <Chip variant="input" onClose={() => Alert.alert('Closed')}>Tag</Chip>
          <Chip variant="filter" selected onClose={() => Alert.alert('Closed')}>Active</Chip>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

With Icons

Open on Snack ↗

import { Chip } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <Chip leadingIcon="calendar" onPress={() => {}}>Schedule</Chip>
          <Chip variant="input" leadingIcon="tag" onClose={() => {}}>Tagged</Chip>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Avatar

The input variant supports a custom avatar prop. avatar and leadingIcon are mutually exclusive on this variant — TypeScript will reject passing both.

Open on Snack ↗

import { Chip } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Image, View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Chip
            variant="input"
            avatar={
              <Image
                source={{ uri: 'https://i.pravatar.cc/40' }}
                style={{ width: 24, height: 24, borderRadius: 12 }}
              />
            }
            onClose={() => {}}
          >
            John Doe
          </Chip>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Disabled

Open on Snack ↗

import { Chip } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Chip disabled onPress={() => {}}>Disabled</Chip>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
variant	enum	-	No	-
elevated	boolean	false false false	No	Whether the chip uses an elevated surface instead of an outline border.
leadingIcon	IconSource	-	No	Icon rendered before the label. Accepts a string name (resolved via the theme's `iconResolver`, defaulting to `MaterialCommunityIcons`), a pre-rendered element, or a render function that receives `{ size, color }`. Icon rendered before the label. When the chip is selected and no `leadingIcon` is provided, a checkmark is shown automatically. Icon rendered before the label.
children	string	-	Yes	Text label rendered inside the chip.
iconSize	number	18	No	Size of the leading icon in dp.
containerColor	string	-	No	Override the container (background) color. State-layer colors (hover, press) are derived automatically.
contentColor	string	-	No	Override the content (label and icon) color. State-layer colors are derived automatically when no containerColor is set.
labelStyle	StyleProp<TextStyle>	-	No	Additional style applied to the label text.
style	StyleProp<ViewStyle>	-	No	Style applied to the root container. Static form only — the function form `(state) => style` is not supported because the component drives its container background through Reanimated. Use `containerColor` / `contentColor` for state-aware styling.
onKeyDown	(event: { nativeEvent: { key?: string; }; }) => void	-	No	-
selected	boolean	-	No	Whether the chip is in a selected (toggled-on) state.
onClose	(() => void) | (() => void)	-	No	Callback fired when the close icon is pressed. The close icon only renders when the chip is selected. Callback fired when the close/remove icon is pressed. When provided, renders a trailing close icon.
avatar	ReactNode	-	No	Custom avatar content (e.g. a small Image or View) before the label.