Switch

Checkbox or radio component styled to appear as a toggle

Sage Component

SageSwitch

<%= sage_component SagePanelRow, { grid_template: "m" } do %>
  <%= sage_component SagePanelStack, {} do %>
    <!-- Checkbox Default -->
    <%= sage_component SageSwitch, {
      id: "sage-switch-1",
      label_text: "Switch (checkbox)",
      name: "sage-switch-1",
      type: "checkbox",
      value: "switch-1-value",
    } %>
    <!-- Checkbox Error -->
    <%= sage_component SageSwitch, {
      has_error: true,
      id: "sage-switch-2",
      label_text: "Switch (checkbox) with error",
      name: "sage-switch-2",
      required: true,
      type: "checkbox",
      value: "switch-2-value",
    } %>
    <!-- Checkbox Disabled -->
    <%= sage_component SageSwitch, {
      disabled: true,
      id: "sage-switch-3",
      label_text: "Switch disabled",
      name: "sage-switch-3",
      type: "checkbox",
      value: "switch-3-value",
    } %>
    <!-- Checkbox On & Disabled -->
    <%= sage_component SageSwitch, {
      checked: true,
      disabled: true,
      id: "sage-switch-4",
      label_text: "Switch on disabled",
      name: "sage-switch-4",
      type: "checkbox",
      value: "switch-4-value",
    } %>
    <!-- Checkbox w/ Message -->
    <%= sage_component SageSwitch, {
      id: "sage-switch-5",
      label_text: "Switch (checkbox) with info",
      message: "Additional Info 1",
      name: "sage-switch-5",
      type: "checkbox",
      value: "switch-5-value",
    } %>
    <%= sage_component SageSwitch, {
      has_error: true,
      id: "sage-switch-6",
      label_text: "Switch (checkbox) error with info",
      message: "Additional Info 2",
      name: "sage-switch-6",
      required: true,
      type: "checkbox",
      value: "switch-6-value",
    } %>
  <% end %>
  <%= sage_component SagePanelStack, {} do %>
    <!-- Radio Default -->
    <%= sage_component SageSwitch, {
      checked: true,
      id: "sage-switch-7",
      label_text: "Switch (radio)",
      name: "sage-switch-7",
      type: "radio",
      value: "switch-7-value",
    } %>
    <%= sage_component SageSwitch, {
      id: "sage-switch-8",
      label_text: "Switch (radio)",
      name: "sage-switch-7",
      type: "radio",
      value: "switch-8-value",
    } %>
    <hr/>
    <!-- Radio Error -->
    <%= sage_component SageSwitch, {
      has_error: true,
      id: "sage-switch-9",
      label_text: "Switch (radio) error",
      name: "sage-switch-9",
      required: true,
      type: "radio",
      value: "switch-9-value",
    } %>
    <!-- Radio Disabled -->
    <%= sage_component SageSwitch, {
      disabled: true,
      id: "sage-switch-10",
      label_text: "Switch (radio) disabled",
      name: "sage-switch-10",
      type: "radio",
      value: "switch-10-value",
    } %>
    <!-- Radio On & Disabled -->
    <%= sage_component SageSwitch, {
      checked: true,
      disabled: true,
      id: "sage-switch-11",
      label_text: "Switch (radio) on disabled",
      name: "sage-switch-10",
      type: "radio",
      value: "switch-11-value",
    } %>
    <!-- Hidden Label Text -->
    <%= sage_component SageSwitch, {
      hide_text: true,
      id: "sage-switch-12",
      label_text: "Switch - visually hidden text",
      name: "sage-switch-12",
      type: "checkbox",
      value: "switch-12-value",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6">Right aligned</h3>
<%= sage_component SageSwitch, {
  id: "sage-switch-20",
  label_text: "Switch (checkbox) with info",
  message: "Additional Info",
  name: "sage-switch-20",
  toggle_position: "right",
  type: "checkbox",
  value: "switch-20-value",
} %>

<h3 class="t-sage-heading-6">Bordered Switch</h3>
<%= sage_component SageSwitch, {
  has_border: true,
  id: "sage-switch-21",
  label_text: "Switch (checkbox) with info",
  message: "Additional Info",
  name: "sage-switch-21",
  type: "checkbox",
  toggle_position: "right",
  value: "switch-21-value",
} %>
<%= sage_component SageSwitch, {
  has_border: true,
  has_error: true,
  id: "sage-switch-22",
  label_text: "Switch (checkbox) with info",
  message: "Additional Info",
  name: "sage-switch-21",
  toggle_position: "right",
  type: "checkbox",
  value: "switch-22-value",
} %>

<h3 class="t-sage-heading-6">Bordered Switch (Radio)</h3>
<%= sage_component SageSwitch, {
  has_border: true,
  id: "sage-switch-23",
  label_text: "Switch (radio) with info",
  message: "Additional Info",
  name: "sage-switch-23",
  toggle_position: "right",
  type: "radio",
  value: "switch-23-value",
} %>
<%= sage_component SageSwitch, {
  has_border: true,
  id: "sage-switch-24",
  label_text: "Switch (radio) with info",
  message: "Additional Info",
  name: "sage-switch-23",
  toggle_position: "right",
  type: "radio",
  value: "switch-24-value",
} %>

<h3 class="t-sage-heading-6">Multiple switches in a list</h3>
<ul>
  <%= sage_component SageSwitch, {
    id: "sage-switch-25",
    in_list: true,
    label_text: "Option A",
    name: "sage-switch-25",
    type: "checkbox",
    value: "switch-25-value",
  } %>
  <%= sage_component SageSwitch, {
    id: "sage-switch-26",
    in_list: true,
    label_text: "Option B",
    name: "sage-switch-25",
    type: "checkbox",
    value: "switch-26-value",
  } %>
  <%= sage_component SageSwitch, {
    id: "sage-switch-27",
    in_list: true,
    label_text: "Option C",
    name: "sage-switch-25",
    type: "checkbox",
    value: "switch-27-value",
  } %>
</ul>

Property	Description	Type	Default
`checked`	Set the switch state to `checked`.	Boolean	`nil`
`disabled`	Set the switch as `disabled`, fully preventing all user interaction. Disabling the control in this way will also prevent its `value` from being included in form data.	Boolean	`nil`
`has_border`	Applies a styled border to the parent container.	Boolean	`nil`
`has_error`	Displays error styles on the component.	Boolean	`nil`
`hide_text`	Visually hide the text, remaining accessible for assistive technologies.	Boolean	`nil`
`id` required	Sets the component `id`.	String	`nil`
`in_list`	Render the container tag as a list-item (`li`) when the switch is used in a list.	Boolean	`false`
`label_text`	Sets the label text for the component.	String	`nil`
`message`	Sets the message text for the component.	String	`nil`
`name` required	Sets the "label" attribute for the component. Useful for grouping form elements.	String	`nil`
`required`	Applies basic HTML form validation on this field, requiring user interaction.	Boolean	`nil`
`standalone`	When set, this component is expected to be used in isolation.	Boolean	`nil`
`toggle_position`	Sets the position of the toggle.	`"right"`	`nil`
`type` required	Sets the "type" attribute of the component.	String	`nil`
`value`	Assigns a string to submit in forms. If not assigned, this will default to the `id`. Take note that "unchecked" values will not be submitted in forms.	String	`nil`

Remember to check that the id of the input and the label's for attribute match
Radio button switches each must have a unique value to accurately represent the selection

Don't

Combine the checked & disabled states with caution! Clearly describe why this item cannot be unselected.