Checkbox
Checkbox component.
import { Checkbox } from '@redshank/native';
When To Use
- Used for selecting multiple values from several options.
- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
Examples
Default
Default checkbox element.
Sizes
Change size to element.
Type Radio
Change aspect between `Square` and `Circle`.
Required
Required element.
Customize Colors
Customize color checkbox.
Error Variant
Set error in element.
APIs
Space Props
Api props extends from View
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| activeColor | ThemeColor | ThemeColor | Active color when value state is true | primary |
| inactiveColor | ThemeColor | ThemeColor | Active color when value state is false | accents2 |
| defaultValue | boolean | true false | Default value for the element | - |
| error | boolean | true false | Show error variant | - |
| label | string | Text | Required label for the show message | - |
| onChange | function | (checked: boolean) => void | Function trigger when the user press the element | - |
| required | boolean | true false | Indicates if element is required | - |
| size | SizeRadiousType | small middle large | Show size of the element | middle |
| type | RadioType | circle square | Show rounded or circle element | circle |
| value | boolean | true false | Controller value for the element | - |
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.