Checkboxes enable users to turn an option on or off.
<link href="https://cdn.jsdelivr.net/npm/rainforest-web-components@latest/rainforest.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/rainforest-web-components@latest/components/checkbox.js" type="module"></script>
<rf-checkbox>Expire</rf-checkbox>
<rf-checkbox checked>Transition to standard access storage class</rf-checkbox>
<rf-checkbox disabled>Delete</rf-checkbox>
<rf-checkbox checked disabled>Archive to the Glacier Storage Class</rf-checkbox>
Name |
Description |
(default ) |
The control's label that's displayed next to the checkbox. |
description |
Description that appears below the label. |
Name |
Type |
Description |
Values |
Default |
Reflects |
checked |
boolean |
Specifies if the component is selected. |
- |
false |
✅ |
disabled |
boolean |
Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. |
- |
false |
✅ |
indeterminate |
boolean |
Specifies that the component is in an indeterminate state. |
- |
false |
✅ |
name |
string |
Specifies the name of the control used in HTML forms. |
- |
null |
✅ |
Name |
Description |
Detail |
rf-blur |
Called when input focus is removed from the UI control. |
- |
rf-change |
Called when the user changes the component state. |
{checked: boolean, indeterminate: false} |
rf-focus |
Called when input focus is moved to the UI control. |
- |
Name |
Description |
Arguments |
focus() |
Sets input focus onto the UI control. |
- |
Name |
Description |
box |
Rectangle representing the box |
check |
Line representing the check mark |
description |
Holder for description content |
input |
Internal input element |
interdeterminate |
Line representing unknown state |
label |
Holder for label content |
vector |
SVG area for drawing state |
None