x
1
2
3
4
<div class="flex items-center gap"> <input type="checkbox" name="status_disabled" id="status_disabled" value="1" disabled="disabled" class="switch" role="switch" /> <label class="text-sm font-medium opacity-50" for="status_disabled">Disabled</label></div>1
2
3
4
<div class="flex items-center gap"> <%= check_box_tag :status_disabled, disabled: true, class: "switch", role: "switch" %> <%= label_tag :status_disabled, "Disabled", class: "text-sm font-medium opacity-50" %></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
41
42
43
44
45
46
47
48
49
50
.switch { --switch-size: var(--size-4); --switch-block-size: calc(var(--switch-size) + var(--border) * 2); --switch-inline-size: calc(var(--switch-size) * 2); align-items: center; appearance: none; background-color: var(--color-border); border-color: transparent; border-radius: var(--rounded-full); border-width: var(--border); block-size: var(--switch-block-size); display: inline-flex; inline-size: var(--switch-inline-size); transition-duration: var(--time-150); transition-property: background-color; transition-timing-function: var(--ease-out-3); &:checked { background-color: var(--color-primary); } &:checked::before { translate: calc(100% - var(--border) * 2); } &::before { aspect-ratio: var(--aspect-square); background-color: var(--color-text-reversed); block-size: var(--switch-size); border-radius: var(--rounded-full); content: ""; display: block; transition-duration: var(--time-150); transition-property: translate; transition-timing-function: var(--ease-out-3); } &:focus-visible { outline: var(--border-2) solid var(--color-selected-dark); } &:disabled { cursor: not-allowed; opacity: var(--opacity-50); }}.switch--sm { --switch-size: var(--size-3);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.