TagsInput

Enter tags with suggestions support

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

Usage

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

const [tags, setTags] = useState<string[]>([]);

<TagsInput
  label="Technologies"
  placeholder="Pick or type technologies"
  data={['React', 'Angular', 'Vue', 'Svelte']}
  value={tags}
  onChange={setTags}
  maxTags={5}
  splitChars={[',', ' ']}
  clearable
  nothingFoundMessage="Nothing found..."
/>

Props

Prop	Type	Default	Description
`data`	`string[]`	`[]`	Suggestions displayed in the dropdown
`value`	`string[]`		Controlled value. If provided, component becomes controlled
`defaultValue`	`string[]`		Default value for uncontrolled component
`onChange`	`(value: string[]) => void`		Called when value changes, receives the new tags array
`searchValue`	`string`		Controlled search value
`defaultSearchValue`	`string`		Default search value for uncontrolled component
`onSearchChange`	`(value: string) => void`		Called when search value changes
`maxTags`	`number`		Maximum number of tags that can be added
`allowDuplicates`	`boolean`	`false`	Determines whether duplicate tags are allowed
`onDuplicate`	`(value: string) => void`		Called when user tries to submit a duplicated tag
`splitChars`	`string[]`	`[',']`	Characters that trigger tag split when typed
`clearable`	`boolean`	`false`	Determines whether the clear button is displayed
`onClear`	`() => void`		Called when the clear button is pressed
`acceptValueOnBlur`	`boolean`	`true`	If set, the typed value is accepted when the field loses focus
`label`	`React.ReactNode`		Input label displayed above the input
`description`	`React.ReactNode`		Input description displayed below the label
`error`	`React.ReactNode`		Error message displayed below the input
`placeholder`	`string`		Field placeholder displayed when the field is empty
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"sm"`	Controls input height and font size
`radius`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"sm"`	Key of theme.radius or any valid value to set border-radius
`variant`	`'default' \| 'filled' \| 'unstyled'`	`"default"`	Input variant
`required`	`boolean`		Displays required asterisk next to the label
`disabled`	`boolean`		If set, input is disabled
`maxDropdownHeight`	`number`	`200`	Maximum height of the suggestions list
`nothingFoundMessage`	`React.ReactNode`		Message displayed when no suggestions match the search
`style`	`ViewStyle`		Additional styles to apply to the root element

Source on GitHub · npm