Package:
@react-form-builder/components-rsuite
· Source
code
Introduction
The Checkbox component allows your users to confirm or agree with your provided statement. This
component is useful for gathering a simple “yes” or “no” response to a question, such as agreeing to terms and conditions or opting in to a
newsletter. Checkboxes can be also used in groups, which allow your users to select one or more values from a set. This component is a part
of @react-form-builder/components-rsuite.
You can customize a checkbox component to fit your needs by using available options and properties that are introduced and described below.
Main properties
The following general properties are available within the Main tab:
| Name | Type | Description |
|---|
| Label | string | Text that is displayed for your checkbox |
| Checked | boolean | Makes your checkbox checked or unchecked by default |
| Disabled | boolean | If set to true, makes your checkbox inactive |
| Read Only | boolean | If set to true, makes your checkbox unavailable to interact with |
| Indeterminate | boolean | When being a checkbox, setting styles after the child part is selected. In other words, when a checkbox is partially checked, this property controls whether to apply a specific visual style to it |
| Inline | boolean | Switches to the inline layout |
| Title | string | Used to enter HTML title for your checkbox |
Style properties
These are properties that allow to customize the size, color and other style properties of your component:
-
For Device: You can provide component’s style customization for all devices or specific
devices by using this dropdown list. Refer to Adaptive Layout for more
details.
-
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize
it for a specific device type, as selected in the For Device property:
| Name | Type | Description |
|---|
| Width | number | Specifies the width for your component |
| Height | number | Specifies the height for your component |
| Margin top/right/bottom/left | number | Margin values for you component |
| Color | string | Allows customizing the text color |
| Background color | string | Enables customizing the background color |
Last modified on April 16, 2026
