Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
<!-- Default -->
<div class="flex items-center gap">
  <input type="checkbox" name="status" id="status" value="1" checked="checked" class="switch" role="switch" />
  <label class="text-sm font-medium" for="status">Airplane Mode</label>
</div>
<!-- Disabled -->
<div class="flex items-center gap">
  <input type="checkbox" name="status_disabled" id="status_disabled" value="1" checked="checked" disabled="disabled" class="switch" role="switch" />
  <label class="text-sm font-medium" for="status_disabled">Airplane Mode</label>
</div>
1
2
3
4
5
6
7
8
9
10
11
<%# Default %>
<div class="flex items-center gap">
  <%= check_box_tag :status, checked: true, class: "switch", role: "switch" %>
  <%= label_tag :status, "Airplane Mode", class: "text-sm font-medium" %>
</div>
<%# Disabled %>
<div class="flex items-center gap">
  <%= check_box_tag :status_disabled, checked: true, disabled: true, class: "switch", role: "switch" %>
  <%= label_tag :status_disabled, "Airplane Mode", class: "text-sm font-medium" %>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.switch {
  appearance: none;
  background-color: var(--color-border);
  border-color: transparent;
  border-radius: var(--rounded-full);
  border-width: var(--border-2);
  block-size: var(--size-6);
  cursor: pointer;
  inline-size: var(--size-11);
  transition-duration: var(--time-150);
  transition-property: var(--transition-colors);
  &:checked {
    background-color: var(--color-primary);
  }
  &:checked::before {
    margin-inline-start: var(--size-5);
  }
  &::before {
    aspect-ratio: var(--aspect-square);
    background-color: var(--color-text-reversed);
    block-size: var(--size-full);
    border-radius: var(--rounded-full);
    content: "";
    display: block;
    transition: margin var(--time-150);
  }
  &:focus-visible {
    outline: var(--border-2) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }
  &:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-50);
  }
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.