react-native-ui-lib/src/components/chipsInput/chipsInput.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "ChipsInput",
  "category": "form",
  "description": "A chips input",
  "extends": [
    "form/TextField"
  ],
  "modifiers": [
    "margin",
    "color",
    "typography"
  ],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.tsx",
  "images": [],
  "props": [
    {
      "name": "chips",
      "type": "ChipProps[]",
      "description": "List of chips to render"
    },
    {
      "name": "defaultChipProps",
      "type": "ChipProps",
      "description": "Default set of props to pass by default to all chips"
    },
    {
      "name": "onChange",
      "type": "(newChips, changeReason, updatedChip) => void",
      "description": "Callback for chips change (adding or removing chip)"
    },
    {
      "name": "maxChips",
      "type": "number",
      "description": "The maximum chips to allow adding"
    }
  ],
  "snippet": [
    "function Example(props) {",
    "  const [chips, setChips] = useState([{label: 'Falcon 9'}, {label: 'Enterprise'}]);",
  
    "  return (",
    "    <View flex padding-s5>",
    "      <ChipsInput",
    "        onChange={setChips}",
    "        placeholder={'Placeholder'}",
    "        defaultChipProps={{borderRadius: 0}}",
    "        chips={chips}",
    "      />",
    "    </View>",
    "  );",
    "}"
  ],
  "docs": {
    "hero": {
      "title": "ChipsInput",
      "description": "A chips input"
    },
    "tabs": [
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "section",
            "content": [
              {
                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-114418&embed-host=share",
                "height": 1600
              }
            ]
          }
        ]
      }
    ]
  }
}