Base Input
Basic text input with a label and optional hint(s) and error(s). Use it for short text inputs like names and emails.
Link to section titled: Component
Component
Base Input
- html<!-- COMPONENT-START: nc-input-field -->
<div class="nc-input-field">
<label for="input" class="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>
</label>
<input id="input" class="nc-input" aria-required="true" autocomplete="" type="text" />
</div>
<!-- COMPONENT-END: nc-input-field --> Link to section titled: Usage notes
Usage notes
- Ideally, mark labels and inputs as optional and set aria-required="false"
- You can set min and max-widths globally using --input-field-min-inline-size and --input-field-max-inline-size