Radio Input Field
Oftentimes the best choice for selecting one option out of a few. Prefer over selects for 2-5 options.
Link to section titled: Component
Component
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 --> Link to section titled: Usage notes
Usage notes
- You can register a 'change' event on the fieldset to listen for changes in the radio inputs.