PillsInput

Input container for pills with free text field

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

Usage

import { Pill, PillsInput, PillsInputField } from 'react-native-mantine';

<PillsInput label="Keywords" description="Add up to 5 keywords">
  {keywords.map((keyword) => (
    <Pill
      key={keyword}
      withRemoveButton
      onRemove={() => removeKeyword(keyword)}
    >
      {keyword}
    </Pill>
  ))}

  <PillsInputField
    placeholder="Add keyword"
    value={search}
    onChangeText={setSearch}
    onSubmitEditing={addKeyword}
  />
</PillsInput>

Props

Prop	Type	Description
`placeholder`	`string`	Field placeholder displayed when the field is empty
`value`	`string`	Controlled field value (inherited from TextInput)
`onChangeText`	`(text: string) => void`	Called when the field text changes (inherited from TextInput)
`onSubmitEditing`	`() => void`	Called when the field is submitted (inherited from TextInput)
`editable`	`boolean`	Controls whether the field can be edited, defaults to the PillsInput disabled state
`style`	`TextStyle`	Additional styles to apply to the field

Source on GitHub · npm