Checkbox

Checkboxes provide users with selectable options like toggling a single setting or selecting multiple options from a list.

React Component

Sage Component

SageCheckbox

<!-- Default -->
<%= sage_component SagePanelStack, { spacing: "form" } do %>

  <h3 class="t-sage-heading-6">Default:</h3>

  <%= sage_component SageCheckbox, {
    id:"c1",
    label_text: "Label text",
  } %>

  <%= sage_component SageCheckbox, {
    id:"c2",
    label_text: "Partial",
    partial_selection: true
  } %>

  <%= sage_component SageCheckbox, {
    id:"c3",
    label_text: "Checked",
    checked: true,
  } %>

  <%= sage_component SageCheckbox, {
    id:"c4",
    label_text: "Checkbox w/ Message",
    message: 'This is where a "hint" message would appear.',
  } %>

  <h3 class="t-sage-heading-6">Disabled:</h3>

  <%= sage_component SageCheckbox, {
    id:"c5",
    label_text: "Label text",
    disabled: true,
  } %>

  <%= sage_component SageCheckbox, {
    id:"c6",
    label_text: "Partial",
    partial_selection: true,
    disabled: true,
  } %>

  <%= sage_component SageCheckbox, {
    id:"c7",
    label_text: "Checked",
    checked: true,
    disabled: true,
  } %>

  <%= sage_component SageCheckbox, {
    id:"c8",
    label_text: "Checkbox w/ Message",
    message: 'This is where a "hint" message would appear.',
    disabled: true,
  } %>

  <h3 class="t-sage-heading-6">Error:</h3>

  <%= sage_component SageCheckbox, {
    id:"c9",
    label_text: "Label text",
    has_error: true,
  } %>

  <%= sage_component SageCheckbox, {
    id:"c10",
    label_text: "Partial",
    partial_selection: true,
    has_error: true,
  } %>

  <%= sage_component SageCheckbox, {
    id:"c11",
    label_text: "Checked",
    checked: true,
    has_error: true,
  } %>

  <%= sage_component SageCheckbox, {
    id:"c12",
    label_text: "Checkbox w/ Message",
    message: 'This is where a "hint" message would appear.',
    has_error: true,
  } %>

  <h3 class="t-sage-heading-6">Custom content:</h3>

  <%= sage_component SageCheckbox, {
    id:"c13",
    label_text: "Checkbox",
    checked: false,
    disabled: false,
    has_error: false,
    message: 'This is where a "hint" message would appear.',
  } do %>
    <% content_for :sage_checkbox_custom_content do %>
      <p>Paragraph for testing custom content.</p>
    <% end %>
  <% end %>
<% end %>

Property	Description	Type	Default
`attributes`	For setting additional attributes not defined above. Accepts a Ruby hash of valid key-value properties, such as data-attributes	Hash	`nil`
`checked`	Sets the state to "checked" by default	String	`nil`
`disabled`	Prevents all user interaction with the control. Be aware that when combining a disabled checkbox with a default "checked" state, the value of the checkbox will not be included when its parent form is submitted. Likewise, setting Required will not have any effect.	String	`nil`
`has_error`	This will display error styles on the component.	Boolean	`nil`
`id`	Unique identifier for the checkbox. Should match the "for" attribute on the corresponding label	String	`nil`
`label_text`	Sets the label text for the component.	String	`nil`
`message`	Sets the message text for the component.	String	`nil`
`name`	See MDN Web Docs for details on checkbox name attribute	String	`nil`
`partial_selection`	When set, adds styling to show that now all elements are selected	Boolean	`nil`
`required`	Adding this attribute allows basic HTML form validation on this field	Boolean	`nil`
`standalone`	When set, this component is expected to be used in isolation.	Boolean	`nil`
`value`	Sets the value of the form component.	String	`nil`
Content Slots
`:sage_checkbox_custom_content`	Slot for any custom content below the checkbox.