Chips set - Web Component

Browser support

Detected engine:

Chromium
Webkit
Gecko

Parameters

The Web component uses the <z-chips-set> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
`options`	`object[]`	List of options for the chips
`config` (optional)	`string`	Configuration of the chip set
`value` (optional)	`string[]`	Value of the selected chips
`disabled` (optional)	`boolean`	Disables the input
`readonly` (optional)	`boolean`	Makes the input read-only
`required` (optional)	`boolean`	Makes the input required

The events emitted from the component are:

Name	Payload	Description
`onchange`	`string[]`	Returns the new value of the "value" attribute
`onrestarted`	`void`	Emitted on value reset

The available slots for the component are:

Name	Tags	Description
`default`	`span`

`options`

The options attribute is an array of objects that represent the chips. Each object inside the array should have the following properties:

text: The text that will be displayed inside the chip.
disabled: A boolean that indicates if the chip is disabled.

`config`

The config attribute is used to set the shape and size of the chip set. It is an object that can have the following properties:

`value`

The value attribute is an array of strings that represent the selected chips.

`disabled`

The disabled attribute is a boolean that blocks the user from interacting with the chips.

`readonly`

The readonly attribute is a boolean that sets the chips to read-only mode.

`required`

The required attribute is a boolean that sets the chips to required mode.

Playground

Customization

HTML Examples

Imports

html

<link rel="stylesheet" href="/0.5.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.3/@zurich/web-components/chips-set.js"></script>

Code

html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZDS | Link Web Component example</title>

    <!-- #region imports -->
    <link rel="stylesheet" href="/0.5.3/@zurich/web-components/styles.css" />
    <script type="module" src="/0.5.3/@zurich/web-components/chips-set.js"></script>
    <!-- #endregion imports -->

    <link rel="stylesheet" href="/0.5.3/examples/styles.css" />
    <script type="module" src="/0.5.3/examples/params-script.js"></script>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>line</th>
          <th>shaped</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>with value</th>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]'
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]' config="shaped"
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
        </tr>
        <tr>
          <th>disabled</th>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]' disabled
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]' disabled config="shaped"
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
        </tr>
        <tr>
          <th>readonly</th>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]' readonly
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]' readonly config="shaped"
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
        </tr>
        <tr>
          <th>invalid</th>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]' help-text="Invalid input" invalid
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
          <td>
            <div>
              <z-chips-set label="Date input" value='["1","2","3","4"]' help-text="Invalid input" invalid
                config="shaped"
                options='{ "1":{ "text": "Chip 1" }, "2":{ "text": "Chip 2" }, "3":{ "text": "Disabled chip", "disabled": true }, "4":{ "text": "Chip 4" } }'>
              </z-chips-set>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Chips set - Web Component ​

Browser support ​

Parameters ​

options ​

config ​

value ​

disabled ​

readonly ​

required ​

Playground ​

Customization ​

HTML Examples ​