Checkbox
Checkboxes provide users with selectable options like toggling a single setting or selecting multiple options from a list.
Paragraph for testing custom content.
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 |
---|---|---|---|
|
For setting additional attributes not defined above. Accepts a Ruby hash of valid key-value properties, such as data-attributes |
Hash |
|
|
Sets the state to "checked" by default |
String |
|
|
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 |
|
|
This will display error styles on the component. |
Boolean |
|
|
Unique identifier for the checkbox. Should match the "for" attribute on the corresponding label |
String |
|
|
Sets the label text for the component. |
String |
|
|
Sets the message text for the component. |
String |
|
|
Using a singular name groups radio buttons together, allowing the user to toggle between them (see Option 1 and Option 2 examples above) |
String |
|
|
When set, adds styling to show that now all elements are selected |
Boolean |
|
|
Adding this attribute allows basic HTML form validation on this field |
Boolean |
|
|
When set, this component is expected to be used in isolation. |
Boolean |
|
|
Sets the value of the form component. |
String |
|
Content Slots | |||
|
Slot for any custom content below the checkbox. |