Chip

Selectable tag with checkmark

Import: import { Chip } from 'react-native-mantine';

Usage

import { Chip } from 'react-native-mantine';

<Chip
  checked={checked}
  onChange={setChecked}
  color="blue"
  size="sm"
>
  React Native
</Chip>

// With Group
<Chip.Group value={value} onChange={setValue}>
  <Chip value="react">React</Chip>
  <Chip value="vue">Vue</Chip>
  <Chip value="angular">Angular</Chip>
</Chip.Group>

Props

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`		Chip components to be rendered within the group
`value`	`string \| string[]`		Controlled selected value(s). Single string for single selection, array for multiple selection
`defaultValue`	`string \| string[]`		Default selected value(s) for uncontrolled mode
`onChange`	`(value: string \| string[]) => void`		Callback fired when selection changes, receives new value(s) as argument
`multiple`	`boolean`	`false`	If true, multiple chips can be selected simultaneously
`spacing`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"sm"`	Spacing between chips in the group
`style`	`ViewStyle`		Additional styles to apply to the group container

Source on GitHub · npm