UI Generator

Select theme appearance
Label Hint is an accessible way to provide additional information that might help the user Render errors here if there is an issue with the input.

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 -->
  • 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)