Tag Select Field
Shows multiple options as tags or chips. Styles can be adjusted. Use it to show lots of short options.
Link to section titled: Component
Component
Tag Select Field
- html<!-- COMPONENT-START: nc-tag-select-field -->
<fieldset class="nc-fieldset nc-input-field nc-tag-select-field">
<legend class="nc-legend nc-stack">
<span class="nc-input-label">Label</span>
<span class="nc-hint"
>Hint is an accessible way to provide additional information that might help the user</span>
<span class="nc-input-error">Render errors here if there is an issue with the input.</span>
</legend>
<div class="nc-cluster">
<!-- Options can be multiple -->
<!-- An all items can be useful -->
<label for="tag-select-all" class="nc-pile badge">
<input
id="tag-select-all"
class="nc-tag-input"
type="radio"
value="ALL"
name="tag-select"
checked
/>
<span>All</span>
</label>
<label for="tag-select-1" class="nc-pile badge">
<input
id="tag-select-1"
class="nc-tag-input"
type="radio"
value="value-1"
name="tag-select"
/>
<span>Option 1</span>
</label>
<label for="tag-select-2" class="nc-pile badge">
<input
id="tag-select-2"
class="nc-tag-input"
type="radio"
value="value-2"
name="tag-select"
/>
<span>Option 2</span>
</label>
<label for="tag-select-3" class="nc-pile badge">
<input
id="tag-select-3"
class="nc-tag-input"
type="radio"
value="value-3"
name="tag-select"
/>
<span>Option 3</span>
</label>
<!-- End Options -->
</div>
</fieldset>
<!-- COMPONENT-END: nc-tag-select-field --> Link to section titled: Usage notes
Usage notes
- Feel free to change the contents and class of the label to whatever suits your needs
- You can easily style the selected state with label:has(input:checked)