Net7 UI Kit

Input element: Lg 

<div class="n7-input n7-input-field n7-input-radio n7-input--lg">
    <div class="flex gap-2 items-center">
        <input id="radioId" name="fieldsetName" class="  " type="radio">
        <label class="input-radio__label" for="radioId">
            label radiobutton
        </label>
    </div>

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

    .n7-input-radio__label {
        @apply text-base font-medium;
    }

    /* SIZES */

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

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

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

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

Input radio component configurations.

  • label: radio 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
  • name: value - name for the radiobutton group
  • padding: value - input padding
  • border: value - input border
  • radius: value - input border radius
  • classes: value - input classes
  • checked: true - if radio is checked
  • 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