Abstract checkbox component

scss

@use "node_modules/sass-basis/src/css/core";

.c-checkbox {
  @include core.checkbox();
}

html

<label>
  <span class="c-checkbox">
    <input type="checkbox" class="c-checkbox__control">
    <span class="c-checkbox__label">...</span>
  </span>
</label>

Abstract form control component

scss

@use "node_modules/sass-basis/src/css/core";

.c-form-control {
  @include core.form-control();
}

html

<input type="text" class="c-form-control">

Abstract input group component

scss

@use "node_modules/sass-basis/src/css/core";

.c-input-group {
  @include core.input-group();
}

html

<div class="c-input-group">
  <div class="c-input-group__addon">@</div>
  <div class="c-input-group__field">
    <input type="text">
  </div>
  <button class="c-input-group__btn">Go</button>
</div>

Abstract radio button component

scss

@use "node_modules/sass-basis/src/css/core";

.c-radio {
  @include core.radio();
}

html

<label>
  <span class="c-radio">
    <input type="radio" class="c-radio__control">
    <span class="c-radio__label">...</span>
  </span>
</label>

Abstract selectbox component

scss

@use "node_modules/sass-basis/src/css/core";

.c-select {
  @include core.select();
}

html

<div class="c-select">
  <select class="c-select__control">
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__toggle"></span>
</div>