@zplane-web/craft-licensing

Radio button: Disabled 

<label class="radio radio--disabled" id="radio-wrapper" for="radio">
    <input class="radio__input" id="radio" name="radio" value="1" disabled aria-required="false" aria-checked="false" type="radio" />

    <div class="radio__marker"></div>

    <span class="radio__text">This is a radio button</span>
</label>
 
{% set id = id ??? html_id('radio') %}
{% set required = required ?? false %}
{% set invalid = invalid ?? false %}
{% set disabled = disabled ?? false %}
{% set checked = checked ?? false -%}

<label {{ html_attributes({
  class: {
    'radio': true,
    'radio--disabled': disabled ?? false,
  },
  id: 'wrapper' | namespaceInputId(id),
  for: id,
}, attrs ?? {}) }}>
  <input {{ html_attributes({
    class: 'radio__input',
    id: id,
    name: name,
    value: value,
    checked: checked,
    required: required,
    disabled: disabled,
    'aria-required': required ? 'true' : 'false',
    'aria-checked': checked ? 'true' : 'false',
    'aria-invalid': invalid ? 'true' : null,
    type: 'radio',
  }, inputAttrs ?? {}) }} />

  <div class="radio__marker"></div>

  <span class="radio__text">
    {{- text | componentize(inline_only=true) -}}
  </span>
</label>
 
{
  "id": "radio",
  "name": "radio",
  "value": 1,
  "text": "This is a radio button",
  "disabled": true
}
  • Content: 
    @use 'a11y';

.radio {
  --_radio-size: var(--radio-size, 2.8rem);

  cursor: pointer;
  display: flex;
  gap: 1.5rem;
  position: relative;

  &:has([disabled]) {
    cursor: default;
    filter: grayscale(1);
    opacity: 0.2;
  }

  &:has(:focus-visible:not(:any-link)) {
    @include a11y.outline();
  }
}

.radio__input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.radio__marker {
  align-items: center;
  background-color: var(--radio-background-color, var(--color-white));
  block-size: var(--_radio-size);
  border-color: var(--radio-border-color, var(--color-gray-200));
  border-radius: 50%;
  border-style: var(--radio-border-style, solid);
  border-width: var(--radio-border-width, 1px);
  color: transparent;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  inline-size: var(--_radio-size);
  justify-content: center;
  transition-property: background-color, border-color;
  user-select: none;

  .radio__input ~ & {
    background-color: var(--radio-background-color--checked, var(--color-white));
    border-color: var(--radio-border-color--checked, var(--color-gray-200));
  }

  &::before {
    background-color: var(--radio-marker-color, var(--color-steel-800));
    block-size: calc(var(--_radio-size) / 2);
    border-radius: 50%;
    content: '';
    display: block;
    inline-size: calc(var(--_radio-size) / 2);
    opacity: 0;
    transition-property: opacity;
  }

  .radio__input:checked ~ &::before {
    opacity: 1;
  }
}

.radio__text {
  color: inherit;
  font-size: inherit;
  line-height: var(--radio-line-height, var(--line-height-wide));
  margin-block-start: calc((var(--_radio-size) - 1lh) / 2);
  text-align: start;
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/components/2-atoms/radio/radio.scss
  • Size: 1.7 KB

No notes defined.