Components

Tags input

A list of tags as removable chips, added with Enter or a comma.

scheme
  • effect
  • foldkit

forSlots(TagsInputSlots)(Recipes.TagsInput({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const TagsInputStyle = forSlots(TagsInputSlots)(Recipes.TagsInput({}))

export const tagsInput = <Message>(
  style: NamedStyle<typeof TagsInputSlots>,
  model: TagsInput.Model,
  onMessage: (message: TagsInput.Message) => Message,
  h: HtmlBuilder<Message>,
): Html => TagsInput.view({ model, onMessage, label: 'Topics', placeholder: 'Add a topic', style }, h)

The recipe ↗This code ↗