Net7 UI Kit

Input checkbox element: Sm 

<div class="n7-input n7-input-field n7-input-checkbox n7-input--sm ">
    <div class="flex gap-2 items-center">
        <input id="checkboxId" name="checkboxId" class="   " type="checkbox">
        <label class="n7-input-checkbox__label" for="checkboxId">
            Label checkbox
        </label>
    </div>

</div>
 
{% extends '@input-checkbox' %}
{% block size %} n7-input--sm {% endblock %}
 
{
  "label": "Label checkbox",
  "id": "checkboxId",
  "name": "checkboxName",
  "inFieldset": false,
  "shortLabel": null,
  "padding": null,
  "border": null,
  "radius": null,
  "classes": null,
  "checked": false,
  "placeholder": null,
  "iconPlaceholder": null,
  "fieldRequired": false,
  "ariaDescribedBy": null,
  "hasErrorControl": false,
  "hasError": false,
  "ariaInvalid": false,
  "errorId": null,
  "errorDescription": null
}
  • Content: 
    /**
 * INPUT
 * 
 *
*/
@layer components {
    .n7-input-checkbox input[type="checkbox"] {
        @apply w-5 h-5 n7-border-input rounded;
    }

    .n7-input-checkbox__label {
        @apply text-base font-medium cursor-pointer;
    }

    /* SIZES */

    .n7-input--sm input[type="checkbox"] {
        @apply w-4 h-4;
    }

    :where(.n7-input--sm) .n7-input-checkbox__label {
        @apply text-sm;
    }

    .n7-input--lg input[type="checkbox"] {
        @apply w-6 h-6;
    }


    .has-error input[type="checkbox"]{
        @apply n7-border-error-dark border-2;
    }
}
  • URL: /components/raw/input-checkbox/input-checkbox.css
  • Filesystem Path: components/03-molecules/forms/input-checkbox/input-checkbox.css
  • Size: 581 Bytes

Input component configurations.

  • label: checkbox label
  • shortLabel: value - a shorter label printend in data-label attribute - needed for js error management
  • labelClasses: value - eventual classes for label
  • id: value - id of input
  • padding: value - input padding
  • border: value - input border
  • radius: value - input border radius
  • classes: value - input classes
  • fieldRequired: true - if input is required (print aria-required=”true” instead of required attribute, better for accessibility; print error message wrapper and id for aria-describedby)
  • ariaDescribedBy: value - if there’s a description for the field (used in input-field)
  • hasErrorControl: true - if input needs a validation (eg: email format - used in input-field)
  • ariaInvalid: true - if input with error is needed
  • alertIcon: value - id for right positioned alert icon
  • inFieldset: true - if input is in a fieldset