Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - switch
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
RadioButtonGroup</code> or <code>Checkbox</code> instead.</p> <p>Furthermore, switches cannot be grouped – each <code>Switch</code> triggers an independent state update. If you want multiple mutually exclusive choices, the <code>RadioButtonGroup</code> is the better option. To offer multiple choices within the same group or context which are not mutually exclusive, use <code>Checkbox</code> instead.</p> <h2>Implementation / Options</h2> <h3>Props</h3> <p>The <code>Switch</code> component accepts the following props:</p> <ul> <li><code>value</code> (boolean, optional): Sets the initial value of the switch. When true, the switch is in the "on" state; when false, it is in the "off" state.</li> <li><code>transparent</code> (boolean, optional): Makes the switch's background and border transparent for inline use.</li> <li><code>invalid</code> (boolean, optional): Shows an invalid state around the input, typically for indicating errors.</li> </ul> <h3>Example Usage</h3> <h4>Switch</h4> <div class="example-container"> <div class="switch-container"> <label class="switch"> <input type="checkbox" id="example-switch"> <span class="slider"></span> </label> <span class="switch-label">Toggle feature</span> </div> </div> <h4>InlineSwitch</h4> <div class="example-container"> <div class="inline-switch"> <label class="switch transparent"> <input type="checkbox" id="inline-switch"> <span class="slider"></span> </label> <span class="switch-label">Inline toggle</span> </div> </div> <h2>Playground</h2> <div class="playground"> <div class="controls"> <div class="control-group"> <label class="control-label">Label</label> <input type="text" id="label-input" value="Toggle feature" style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px;"> </div> <div class="control-group"> <div class="checkbox-control"> <input type="checkbox" id="disabled-control"> <label for="disabled-control" class="control-label">Disabled</label> </div> </div> <div class="control-group"> <div class="checkbox-control"> <input type="checkbox" id="invalid-control"> <label for="invalid-control" class="control-label">Invalid</label> </div> </div> <div class="control-group"> <div class="checkbox-control"> <input type="checkbox" id="transparent-control"> <label for="transparent-control" class="control-label">Transparent</label> </div> </div> </div> <div class="demo-area"> <div class="switch-container"> <label class="switch" id="demo-switch"> <input type="checkbox" id="demo-switch-input"> <span class="slider"></span> </label> <span class="switch-label" id="demo-label">Toggle feature</span> </div> </div> </div> <p> <a href="https://grafana.com/developers/saga/components/forms/switch/" target="_blank">Component documentation</a> | <a href="https://storybook.grafana.org/?path=/story/forms-switch--controlled" target="_blank">Storybook</a> | <a href="https://github.com/grafana/grafana/tree/main/packages/grafana-ui/src/components/Switch" target="_blank">Source code</a> </p> <script> document.addEventListener("DOMContentLoaded", function() { const labelInput = document.getElementById("label-input"); const disabledControl = document.getElementById("disabled-control"); const invalidControl = document.getElementById("invalid-control"); const transparentControl = document.getElementById("transparent-control"); const demoSwitch = document.getElementById("demo-switch"); const demoLabel = document.getElementById("demo-label"); const demoSwitchInput = document.getElementById("demo-switch-input"); function updateSwitch() { const label = labelInput.value; const disabled = disabledControl.checked; const invalid = invalidControl.checked; const transparent = transparentControl.checked; demoLabel.textContent = label; demoSwitch.className = "switch"; if (disabled) demoSwitch.classList.add("disabled"); if (invalid) demoSwitch.classList.add("invalid"); if (transparent) demoSwitch.classList.add("transparent"); demoSwitchInput.disabled = disabled; } labelInput.addEventListener("input", updateSwitch); disabledControl.addEventListener("change", updateSwitch); invalidControl.addEventListener("change", updateSwitch); transparentControl.addEventListener("change", updateSwitch); updateSwitch(); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">