mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
49 lines
1.5 KiB
Markdown
49 lines
1.5 KiB
Markdown
---
|
|
title: Selection Pills
|
|
hide_title: true
|
|
---
|
|
|
|
# Selection Pills
|
|
|
|
A simple prefab component displaying a set of "pills" given an array of **Options** (the pill values) and **Labels** (what should be shown in the pills). The user can make a selection, one or many pills. It works very similar to the [Multi Choice](/library/prefabs/multi-choice) prefab.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
There are a few important properties of the **Selection Pills** prefab component that we need to take a closer look at:
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
First, you specify a set of pill values in the **Options** property / input.
|
|
|
|
```javascript
|
|
['one','two','three']
|
|
```
|
|
|
|
Optionally you can specify labels corresponding to each option value, if not the option value will be used as label. This is done via the **Labels** property / input.
|
|
|
|
```javascript
|
|
['One','Two','Three']
|
|
```
|
|
|
|
Finally the **Selection** property / input also contains an array of string, but this time you should have it contain the option values that you want selected. Most often this is connect to a variable or object property. See the example below.
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The component also have a corresponding **Selection** output, here you can see it contains the option values that the user have selected.
|
|
|
|
|
|
|
|
|