Элементы форм


<label class="c-checkbox" for="checkbox-1">
  <input id="checkbox-1" class="c-checkbox__input" type="checkbox" />
  <div class="c-checkbox__state">
    <div class="c-checkbox__control">
      <svg class="c-checkbox__icon icon icon--input-check" stroke="currentColor">
        <use xlink:href="img/svg/sprite.svg#input-check" />
      </svg>
    </div>
    <div class="c-checkbox__title">Заголовок 1</div>
  </div>
</label>

<label class="c-radio" for="radio-1">
  <input
    class="c-radio__input"
    type="radio"
    name="radio"
    id="radio-1"
    value="radio-1"
  />
  <div class="c-radio__state">
    <div class="c-radio__control"></div>
    <div class="c-radio__title">Заголовок 1</div>
  </div>
</label>

<label class="c-switch" for="switch-off">
  <input
    class="c-switch__input"
    type="checkbox"
    name="switch-off"
    id="switch-off"
  />
  <div class="c-switch__state">
    <div class="c-switch__control"></div>
    <div class="c-switch__title">Выключатель</div>
  </div>
</label>

<div class="c-input-field">
  <div class="c-input">
    <label class="c-input__label" for="text-1">
      <div class="c-input__title">Отключено</div>
      <div class="c-input__input-wrapper">
        <input
          class="c-input__input"
          id="text-1"
          type="text"
          placeholder="Ввод недоступен"
          disabled
        />
      </div>
    </label>
  </div>
</div>


.c-checkbox {
  --clr-checkbox-checked-back: var(--clr-primary-1);
  --clr-checkbox-checked-border: var(--clr-primary-1);
  --clr-checkbox-input-border: var(--clr-gray-2);
  --clr-checkbox-disabled: var(--clr-gray-2);
  --clr-checkbox-disabled-title: var(--clr-gray-2);
  --clr-checkbox-animation: var(--clr-sym-checkbox-animation);
  cursor: pointer;
}
.c-checkbox__icon {
  color: var(--clr-white);
  display: none;
  fill: none;
}
.c-checkbox__input {
  position: absolute;
  left: -100vw;
  opacity: 0;
}
.c-checkbox__state {
  display: flex;
  align-items: center;
  margin: 1rem 1.3125rem;
}
.c-checkbox__title {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--clr-font);
}
.c-checkbox__control {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 4px;
  border: 1px solid var(--clr-checkbox-input-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}
@keyframes borderGrow {
  from {
    outline: 0rem solid rgba(var(--clr-checkbox-animation), 0.3);
  }
  to {
    outline: 1.875rem solid rgba(var(--clr-checkbox-animation), 0);
  }
}
.c-checkbox__input:checked ~ .c-checkbox__state .c-checkbox__control {
  background-color: var(--clr-checkbox-checked-back);
  border: 1px solid var(--clr-checkbox-checked-border);
}
.c-checkbox__input:focus:checked ~ .c-checkbox__state .c-checkbox__control {
  animation: borderGrow 300ms ease-out;
}
.c-checkbox__input:checked ~ .c-checkbox__state .c-checkbox__control .c-checkbox__icon {
  display: inline-block;
}
.c-checkbox__input:focus ~ .c-checkbox__state .c-checkbox__title {
  text-decoration: underline;
}
.c-checkbox__input:disabled ~ .c-checkbox__state .c-checkbox__control {
  background-color: var(--clr-checkbox-disabled);
}
.c-checkbox__input:disabled ~ .c-checkbox__state .c-checkbox__title {
  color: var(--clr-checkbox-disabled-title);
}
.c-checkbox__input:disabled ~ .c-checkbox__state .c-checkbox__control .c-checkbox__icon {
  display: none;
}


.c-radio {
  --clr-radio-unchecked-border: var(--clr-gray-2);
  --clr-radio-color: var(--clr-primary-1);
  --clr-radio-title: var(--clr-gray-2);
  --clr-radio-disabled-back: var(--clr-gray-2);
  --clr-radio-disabled-border: var(--clr-gray-2);
  display: inline-flex;
  cursor: pointer;
}
.c-radio__input {
  opacity: 0;
  position: absolute;
  left: -100vw;
}
.c-radio__state {
  display: flex;
  align-items: center;
  margin: 1rem 1.3125rem;
}
.c-radio__control {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--clr-radio-unchecked-border);
  border-radius: 50%;
  margin-right: 0.75rem;
}
.c-radio__title {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--clr-font);
}
.c-radio__input:checked ~ .c-radio__state .c-radio__control {
  border: 2px solid var(--clr-radio-color);
}
.c-radio__input:checked ~ .c-radio__state .c-radio__control::after {
  width: 1.125rem;
  height: 1.125rem;
  content: "";
  position: absolute;
  background-color: var(--clr-radio-color);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.c-radio__input:focus ~ .c-radio__state .c-radio__title {
  text-decoration: underline;
}
.c-radio__input:disabled ~ .c-radio__state .c-radio__title {
  color: var(--clr-radio-title);
}
.c-radio__input:disabled ~ .c-radio__state .c-radio__control {
  background-color: var(--clr-radio-disabled-back);
  border: 2px solid var(--clr-radio-disabled-border);
}


.c-switch {
  display: inline-flex;
  cursor: pointer;
}
.c-switch__input {
  opacity: 0;
  position: absolute;
  left: -100vw;
}
.c-switch__control {
  position: relative;
  width: 3.25rem;
  height: 1.75rem;
  border: 1px solid var(--clr-gray-2);
  border-radius: 1rem;
  box-sizing: border-box;
  margin-right: 0.75rem;
  transition: background-color 0.2s;
}
.c-switch__state {
  display: flex;
  align-items: center;
  margin: 1rem 1.3125rem;
}
.c-switch__control::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0.0625rem;
  top: calc(50% - 0.75rem);
  background-color: var(--clr-gray-2);
  border-radius: 50%;
  transition: left 0.2s;
}
.c-switch__input:checked ~ .c-switch__state .c-switch__control {
  border: 1px solid var(--clr-primary-1);
  background-color: var(--clr-primary-1);
}
.c-switch__input:checked ~ .c-switch__state .c-switch__control::before {
  left: 1.5625rem;
  background-color: var(--clr-white);
}
.c-switch__input:disabled ~ .c-switch__state .c-switch__control {
  background-color: var(--clr-gray-2);
}
.c-switch__input:disabled ~ .c-switch__state .c-switch__control::before {
  background-color: var(--clr-gray-3);
}
.c-switch__input:focus ~ .c-switch__state .c-switch__title {
  text-decoration: underline;
}


.c-input {
  --clr-input-back: var(--clr-sym-input-back);
  --clr-input-border: var(--clr-gray-2);
  --clr-input-placeholder: var(--clr-gray-2);
  --clr-input-invalid: #F03D3E;
  --clr-input-icon-valid: #374FC7;
  --clr-input-border-focus: var(--clr-primary-1);
  --clr-input-back-disabled: var(--clr-sym-input-back-disabled);
}
.c-input__title {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
  text-transform: uppercase;
  margin-bottom: 0.3125rem;
  color: var(--clr-gray-3);
}
.c-input__input::placeholder {
  color: var(--clr-input-placeholder);
}
.c-input__input {
  all: unset;
  display: initial;
  width: 100%;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
}
.c-input__input-wrapper {
  padding: 1.0625rem 0 0.8125rem 1.5rem;
  border: 1px solid var(--clr-input-border);
  border-radius: 8px;
  transition: border 100ms ease-in-out;
}
.c-input__input-wrapper:has(> .c-input__input + .icon) {
  padding-right: 3.125rem;
}
.c-input__input-wrapper:has(> .c-input__input:disabled) {
  background-color: var(--clr-input-back-disabled);
  cursor: no-drop;
}
.c-input__input-wrapper:has(> .c-input__input:focus) {
  border: 1px solid var(--clr-input-border-focus);
}
.c-input__input-wrapper:has(> .c-input__input.c-input__invalid) {
  border: 1px solid var(--clr-input-invalid);
}
.c-input__input-wrapper:has(> .c-input__icon) {
  position: relative;
}
.c-input__icon {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  opacity: 0;
}
.c-input__icon--valid {
  color: var(--clr-input-icon-valid);
}
.c-input__icon--invalid {
  color: var(--clr-input-invalid);
}
.c-input .c-input__icon.c-input__icon--valid,
.c-input .c-input__icon.c-input__icon--invalid {
  opacity: 1;
}