Chakra-UI

I♥️Components

Checkbox

|

Chakra Docs

|

⦾ Chakra UI's Checkbox component, typically used within forms, allows users to select multiple options from a set of given choices. Chakra provides various customization features for its Checkbox components, such as disabled state, custom colors, different sizes, and more, ensuring a high level of adaptability to your application's needs.

  • Checkbox: used in form interfaces to enable users to select multiple options from a given set. It is a versatile UI element that can be tailored to the specific needs of a form.
  • CheckboxGroup: useful for managing the checked state of its child Checkbox components and conveniently passing shared style props to each

These components can be imported as follows:

Examples

Basic Usage

⦾ Here is an example of two checkboxes, one of which is initially checked, set with the isChecked prop.

Code

Disabled Checkbox

⦾ For instances when you want to prevent user interaction with a checkbox, such as in view-only forms, you can use the isDisabled prop to disable the Checkbox. In this example, the isDisabled prop is used on both and the second checkbox is also set to isChecked. Notice the typography changes to indicate that the checkbox is disabled.

Code

Custom Color Schemes

⦾ You can easily adjust the Checkbox's color scheme to match your application's design aesthetics. Just use the colorScheme prop. The following two examples use the purple and pink color schemes.

Code

Checkbox Sizes

⦾ Chakra UI provides three distinct sizes for its Checkbox component: 'sm' (small), 'md' (medium), and 'lg' (large):

Code

Invalid Checkbox

⦾ The isInvalid prop marks a checkbox as invalid. This is useful for form validation scenarios.

Examples of use for this prop would be:

  • Form Validation: If the checkbox is part of a form and there are specific validation rules associated with it, marking it as invalid visually communicates to the user that there is an issue with their selection. It can help prompt them to review and correct any errors before submitting the form.
  • Error Feedback: If the checkbox selection is required and the user has not made a selection or has made an invalid choice, marking it as invalid helps provide clear feedback about the error. It helps users understand what needs to be corrected to proceed.
  • Accessibility: Indicating the invalid state of a checkbox can improve accessibility by providing visual cues to users who may have difficulty perceiving or interpreting color. By combining visual indicators like the isInvalid prop with additional accessibility attributes, you can enhance the usability of your checkbox component for a wider range of users.
  • Visual Consistency: Using the isInvalid prop ensures consistency in your UI design. When other form elements, such as text inputs or select boxes, are marked as invalid, having a consistent visual treatment for checkboxes can create a cohesive and intuitive user experience.

Code

Customizing Spacing and Icon

⦾ You can modify the spacing between the Checkbox and label text using the spacing prop. Additionally, the iconColor prop allows you to customize the check icon's appearance. This why you can change the color of the checkmark that appears when a checkbox is checked.

Code

Indeterminate Checkbox

⦾ The Indeterminate Checkbox feature allows for aCheckbox to be in an intermediate state, neither checked nor unchecked. This is useful in scenarios such as a parent checkbox having multiple child checkboxes. An indeterminate checkbox means that it's neither checked nor unchecked, usually indicating that some of its associated nested checkboxes are checked but not all.

In this component, there are three checkboxes. One parent checkbox and two child checkboxes. The state of the parent checkbox is derived from the states of the child checkboxes. If all children are checked, the parent checkbox will also be checked. If none of the children are checked, the parent will be unchecked. If only some of the children are checked, the parent will be in the indeterminate state.

Code

Checkbox Icon

⦾ The checkbox component provides a way to use icons for the checkbox instead of the default checkmark. This is done by passing an icon prop to the Checkbox component. Here is an example of using the icon prop to pass in the Star icon from the react-icons library.

Code

CheckboxGroup

⦾ CheckboxGroup is a convenience component provided by Chakra UI that allows you to manage the state of multiple checkboxes as a group. It takes care of managing the checked state of its children checkboxes, so you don't have to do it manually. The defaultValue prop is used to define which checkboxes in the group are checked initially.

Code

Hooks

⦾ The useCheckbox and useCheckboxGroup hooks are utility hooks provided by Chakra UI for managing state and focus for custom checkbox components. These hooks encapsulate the logic for handling the checked state and focus state of checkboxes, making it easier to build custom checkbox components.

Did you know?

Creative Idea No. 1

Displaying Additional Content Based on Checkbox Selection: Sometimes, you might want to display additional information or fields based on whether a checkbox is checked. For example, you might have an "Other" checkbox that, when checked, displays an input field for the user to provide additional information. In this example, when the "Other" checkbox is checked, an input field is displayed for the user to provide additional information.

Code

Creative Idea No. 2

Interactive List with Checkbox Selection: Consider a list where users can select multiple items, and the selected items can change color or be marked as strikethrough to provide clear visual feedback on the user's selection. In this example, an array of items is mapped to Checkbox components. When a Checkbox is selected, the item's name is either strikethrough (if it's included in the selected items) or displayed normally.

Code

Creative Idea No. 3

Using Checkbox as a Toggle Button: A checkbox doesn't have to be a small box. You can style it to act like a toggle button, similar to an iOS style switch. In this example, by adjusting the size and colorScheme properties of the Checkbox component, you can create a large, brightly colored toggle button. This allows for a richer, more visually engaging user interface.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.