Checkbox

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


React Component

Default:

This is where a "hint" message would appear.

Disabled:

This is where a "hint" message would appear.

Error:

This is where a "hint" message would appear.

Custom content:

This is where a "hint" message would appear.

Paragraph for testing custom content.

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.