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.

Radio Input Field

- html
<!-- COMPONENT-START: nc-radio-field -->
<fieldset class="nc-fieldset nc-input-field nc-radio-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>
    <!-- Options can be multiple -->
    <div class="nc-checkbox-wrapper nc-input-field">
        <label for="radio-option-1" class="nc-stack" data-label>
            <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>
        </label>
        <input
            data-input
            id="radio-option-1"
            class="nc-input-radio"
            type="radio"
            value="value-1"
            name="radio"
        />
    </div>
    <div class="nc-checkbox-wrapper nc-input-field">
        <label for="radio-option-2" class="nc-stack" data-label>
            <span class="nc-input-label">Label 2</span>
            <span class="nc-hint"
            >Hint is an accessible way to provide additional information that might help the user</span>
        </label>
        <input
            data-input
            id="radio-option-2"
            class="nc-input-radio"
            type="radio"
            value="value-2"
            name="radio"
        />
    </div>
    <!-- End Options -->
</fieldset>
<!-- COMPONENT-END: nc-input-field -->
  • You can register a 'change' event on the fieldset to listen for changes in the radio inputs.