ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Multi Select

yarn add @clayui/multi-select

Multi select is the field type that allows writing text to create “tags” that are represented in the shape of labels.

  • Examples
  • Markup
  • API

Stable3.9.2View in LexiconCHANGELOGstorybook demos

  • Composing
    • Autocomplete
    • Select Button
    • Validation
  • Custom Autocomplete

Multi Select is an aggregate component of the @clayui/form package, consisting of a high-level written above a <ClayInput /> that provides the ability to create tags.

one
Copied!
Code Sample (expand to see it)

Composing

<ClayMultiSelect /> enables you to make compositions to achieve your expected results, as this component is distributed only in a low level component, this increases flexibility and you can create many possibilities but it comes with a price tag... you may want to get close to the Lexicon specifications and will have to compose with some of the other components to get there, let's detail it further below.

Autocomplete

Usually a MultiSelect has an autocomplete to help the user choose existing tags. You can use the sourceItems API to achieve this result.

one
    Copied!
    Code Sample (expand to see it)

    Select Button

    According to the Lexicon specification a Select button can be grouped with MultiSelect to allow tag data to come from elsewhere. You can achieve this result by composing with <ClayForm.Group />, <ClayInput.GroupItem /> and <ClayButton /> .

    one
      Copied!
      Code Sample (expand to see it)

      Validation

      An input needs validation so you can add some composition props with <ClayInput /> and <ClayForm /> to get the result.

      one
        You made an error
        Copied!
        Code Sample (expand to see it)

        Custom Autocomplete

        To customize Autocomplete content to stylize to your needs and also have filter control, you can use the menuRenderer API.

        One
          Copied!
          Code Sample (expand to see it)

          How can this be improved? Create an issue!