Checkbox

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

React Component

Checkbox

This is where a "hint" message would appear.

Paragraph for testing custom content.

Checkbox

Checked

Disabled

Checked and disabled

Error

Checked & Error

Sage Component

SageCheckbox

<!-- Default -->
<%= sage_component SagePanelStack, {} do %>
  <%= sage_component SageCheckbox, {
    id:"c1",
    label_text: "Checkbox",
    checked: false,
    disabled: false,
    has_error: false,
    partial_selection: true
  } %>

  <%= sage_component SageCheckbox, {
    id:"c1b",
    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 %>

  <%= sage_component SageCheckbox, {
    id:"c1c",
    label_text: "Checkbox",
    checked: false,
    disabled: false,
    has_error: false,
    partial_selection: true
  } %>

  <!-- Checked -->
  <%= sage_component SageCheckbox, {
    id: "c2",
    label_text: "Checked",
    checked: true,
    disabled: false,
    has_error: false
  } %>

  <!-- Disabled -->
  <%= sage_component SageCheckbox, {
    id: "c3",
    label_text: "Disabled",
    checked: false,
    disabled: true,
    has_error: false
  } %>

  <!-- Checked and disabled -->
  <%= sage_component SageCheckbox, {
    id: "c4",
    label_text: "Checked and disabled",
    checked: true,
    disabled: true,
    has_error: false
  } %>

  <!-- Error -->
  <%= sage_component SageCheckbox, {
    id: "c5",
    label_text: "Error",
    checked: false,
    disabled: false,
    has_error: true
  } %>

  <!-- Checked & Error -->
  <%= sage_component SageCheckbox, {
    id: "c6",
    label_text: "Checked & Error",
    checked: true,
    disabled: false,
    has_error: true
  } %>
<% 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`	Using a singular name groups radio buttons together, allowing the user to toggle between them (see Option 1 and Option 2 examples above)	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.