Toggle - JS + CSS
Toggle
Struktur HTML
Section titled “Struktur HTML”
<div class="ina-toggle ina-toggle--size-md">
<input type="checkbox" class="ina-toggle__input" id="toggle-input" />
<label for="toggle-input" class="ina-toggle__label">
<span class="ina-toggle__track">
<span class="ina-toggle__thumb"></span>
</span>
</label>
</div>
Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1
Section titled “Contoh 1”<div
id="toggle-variant-first-container"
style="padding: 20px; display: flex; flex-direction: column; gap: 24px;"
>
<div style="display: flex; align-items: center; gap: 12px;">
<div
class="ina-toggle ina-toggle--size-sm"
role="switch"
aria-checked="false"
tabindex="0"
aria-label="Small toggle"
>
<input type="checkbox" class="ina-toggle__input" id="toggle-sm" tabindex="-1" />
<div class="ina-toggle__track" style="pointer-events: none;">
<div class="ina-toggle__thumb"></div>
</div>
</div>
<span>Small</span>
</div>
<div style="display: flex; align-items: center; gap: 12px;">
<div
class="ina-toggle ina-toggle--size-md ina-toggle--checked"
role="switch"
aria-checked="true"
tabindex="0"
aria-label="Medium toggle"
>
<input type="checkbox" class="ina-toggle__input" id="toggle-md" checked tabindex="-1" />
<div class="ina-toggle__track ina-toggle__track--checked" style="pointer-events: none;">
<div class="ina-toggle__thumb ina-toggle__thumb--checked"></div>
</div>
</div>
<span>Medium (checked)</span>
</div>
<div style="display: flex; align-items: center; gap: 12px;">
<div
class="ina-toggle ina-toggle--size-md ina-toggle--disabled"
role="switch"
aria-checked="false"
tabindex="-1"
aria-label="Disabled toggle"
>
<input
type="checkbox"
class="ina-toggle__input"
id="toggle-disabled"
disabled
tabindex="-1"
/>
<div class="ina-toggle__track ina-toggle__track--disabled" style="pointer-events: none;">
<div class="ina-toggle__thumb ina-toggle__thumb--disabled"></div>
</div>
</div>
<span>Disabled</span>
</div>
</div>
<script is:inline>
document.addEventListener('astro:page-load', () => {
if (window.InaUI && window.InaUI.initToggle) {
window.InaUI.initToggle('#toggle-variant-first-container .ina-toggle');
}
});
// Also run on simple load for robustness if View Transitions aren't fully intercepting initial load
if (window.InaUI && window.InaUI.initToggle) {
window.InaUI.initToggle('#toggle-variant-first-container .ina-toggle');
} else {
// Retry if script loaded later
window.addEventListener('load', () => {
if (window.InaUI && window.InaUI.initToggle) {
window.InaUI.initToggle('#toggle-variant-first-container .ina-toggle');
}
});
}
</script>Contoh 2
Section titled “Contoh 2”<div
id="toggle-variant-two-container"
style="padding: 20px; display: flex; flex-direction: column; gap: 16px;"
>
<div style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
<label for="toggle-notifications">Enable notifications</label>
<div
class="ina-toggle ina-toggle--size-md"
role="switch"
aria-checked="false"
tabindex="0"
aria-label="Enable notifications"
>
<input type="checkbox" class="ina-toggle__input" id="toggle-notifications" tabindex="-1" />
<div class="ina-toggle__track" style="pointer-events: none;">
<div class="ina-toggle__thumb"></div>
</div>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
<label for="toggle-email">Email notifications</label>
<div
class="ina-toggle ina-toggle--size-md ina-toggle--checked"
role="switch"
aria-checked="true"
tabindex="0"
aria-label="Email notifications"
>
<input type="checkbox" class="ina-toggle__input" id="toggle-email" checked tabindex="-1" />
<div class="ina-toggle__track ina-toggle__track--checked" style="pointer-events: none;">
<div class="ina-toggle__thumb ina-toggle__thumb--checked"></div>
</div>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
<label for="toggle-sms">SMS notifications</label>
<div
class="ina-toggle ina-toggle--size-md ina-toggle--disabled"
role="switch"
aria-checked="false"
tabindex="-1"
aria-label="SMS notifications"
>
<input type="checkbox" class="ina-toggle__input" id="toggle-sms" disabled tabindex="-1" />
<div class="ina-toggle__track ina-toggle__track--disabled" style="pointer-events: none;">
<div class="ina-toggle__thumb ina-toggle__thumb--disabled"></div>
</div>
</div>
</div>
</div>
<script is:inline>
document.addEventListener('astro:page-load', () => {
if (window.InaUI && window.InaUI.initToggle) {
window.InaUI.initToggle('#toggle-variant-two-container .ina-toggle');
}
});
// Also run on simple load for robustness
if (window.InaUI && window.InaUI.initToggle) {
window.InaUI.initToggle('#toggle-variant-two-container .ina-toggle');
} else {
window.addEventListener('load', () => {
if (window.InaUI && window.InaUI.initToggle) {
window.InaUI.initToggle('#toggle-variant-two-container .ina-toggle');
}
});
}
</script>