Styling ideas for React checkbox component

Modifying Chakra UI styles for a checkbox component to redesign & visually enhance it. This post contains UI design ideas, live components, code samples and some inspiration to assist coders design better.
October 2022 · 5 mins read

by Roman Kamushken & Anton Kuptsov


When to redesign a checkbox

When examining ways to improve the UX of your web app, start with a single component! By tweaking Chakra UI checkbox styles, colors, and states, you can achieve a faster response, better accessibility, and a more satisfying overall UI design lift-up.
There are several parameters to modify for a checkbox that affect it's UI design. By combining the check icon shape, it's color; or adjusting the whole container corners radius, shadows, and background – you achieve UI performance, reduce user delays and pivot the whole web application to more clear, accessible, and modern.

Here are the params we are going to twist today:

  1. Container corner radius
  2. Check icon redesign
  3. Background states style
  4. Color themes

All further CSS customizations are based on several aspects to modify: BG color, corners, border, and shadow. By mixing and styling them you will achieve visual harmony, a slick experience, and an overall user positive attitude to your app.

Let's get to it.

Corners radius

Checkbox component border radius CSS
Adjusting corner radius value is the key to quickly change a checkbox container look, especially when the component is checked, or hovered.

When a checkbox set to selected, by filling down the whole container we can additionally highlight the change of state. Shaded grey, blue or indigo color makes the container visible, so we can manage corners to configure components shape.

Experimenting with corners makes it easy to fit a checkbox component with a proximity of your particular interface UI. For example, highly-rounded corners will be a best fit for the same rounded visual scheme, on the other hand tiny-rounded shapes is a kind of standard for enterprise GUIs. Where is a button may look like a brick, and you should keep this consistent for checkboxes either (e.g. border-radius: 0-2px).
See how background expands and wraps a caption when a checkbox is clicked? When a text label is hovered it makes obvious for the user – clicking here will toggle the checkbox state as well. A caption involved into the action.

Play with corners for your own by editing radius, controlRadius values:

  if (roundedFull) {
    classes = defaultClasses({ radius: "99px", controlRadius: "99px" });

  if (rounded) {
    classes = defaultClasses({ radius: "8px", controlRadius: "2px" });
SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gpt-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
SetGPT is a free service; however, authentication is required

Checkbox redesign

There is no outcome redesigning checked/unchecked icons for the vast of majority cases. The user knows – an icon checked means a confirmation of conditions changed. When a checkbox appears, it means everything is OK, and the new state is confirmed. Any other icons instead of ✓ may confuse.

However, in the world of GUIs (especially from the recent past), you can observe various metaphors to correspond to the active checkbox state. Rounded checkbox, donut-like, squared, outlined, and others.

Stay between the default checkbox and circle-shaped so as not to confuse users, unless your app UI design requires exclusive styles or uncommon solutions.
For example, squared checkboxes are commonly used for enabling/disabling, while rounded is more utilized to represent multiple selections (e.g picking several properties when filtering). So, your final choice must be based on a checkbox use case.

Styled background

Checkbox styled component background CSS
To make it more obvious for a user to distinguish checked items from unchecked you can apply styles to a container background, mainly when it's hovered, or clicked. When you're highlighting a checkbox active state, thus the items are now additionally separated, and styled hover makes it explicit to divide elements.

Wrap selected states with a border (Outlined) to intense a selection performed. Equip with a shadow (Raised) to make it look like a clickable button. Fill a background (Smooth) with shaded colors to use on white, or colored surfaces. Picking a proper style depends on UX results you want to achieve.

Styling a checkbox background is a path to endorse usability and highlight what matters most now in your GUI. However, some basic design skills are required to generate modern & user-friendly themes. The vast of cases recommend staying with a trustworthy combination: an ordinary checkbox + simple text together.

Play with styled checkboxes below (Outlined, Raised, Smooth):

Color themes

Checkbox color tokens in Figma
Swapping color themes for the checkbox component is easy within the color tokens. There are 10 tokens for each color in the Chakra palette. Each color is numbered: the higher the value – the darker is color. Overall, Chakra's colors are well-set and good to go with, taking off the headache to compound a palette for your next app UI.

To calibrate a component and prepare it for the themification you have to set proper color token values for each element the checkbox consists of an icon, text caption; hover, active, and other states. And this requires UI design skills and precise attention to UI details.

The image above shows an example of tokens specifications. After, by toggling color names (e.g Green→Blue→Purple) but keeping values you can easily recolor a checkbox in Chakra UI.

Why change checkbox colors, in general? In many cases you don't need to tune it deeply, however, you can't avoid using red for warning states, yellow for caution, and green for success. In order to highlight or diversify blocks, complex components, or even full app sections, you're free to use wisely Grey, Purple, Cyan, or other colors.
To learn how to store color tokens in React, open the data.js section. You will discover each color named as it is and consists of several values declared internally. This makes styling effortless with component props:

export const COLORS = [
    name: "Blue",
    color: {
      0: "#F5F8FF",
      5: "#EBF2FF",
      10: "#D8E6FF",
      30: "#9DC2FF",
      70: "#2264D1",
      80: "#1B4EA3"
    name: "Orange",
    color: {
      0: "#FFF6ED",
      5: "#FFEFDE",
      10: "#FEE7CD",
      30: "#FDC68B",
      70: "#CE6B00",
      80: "#A05300"
    name: "Green",
    color: {
      0: "#F5FAF5",
      5: "#ECF7ED",
      10: "#DCEDDD",
      30: "#A9D3AB",
      70: "#37833B",
      80: "#2B662E"


A component deep themification is a key to achieve a slick UI and smooth user's experience, but UI design intermediate skills are required here. A visual designer calibrates specs for each tiny detail for a component, then a developer carefully convert those styles into code.

So, let's get through a crucial points once again:
  • Experimenting with separate parts of a component makes it easy to fit a checkbox component with a proximity of your particular interface UI.
  • It's safe to stay with the default checkbox icon as it is acquainted for users, unless your app UI design requires exclusive styles or uncommon solutions.
  • To make it easier for a user to distinguish checked items from unchecked you can apply styles to a container background, mainly when it's hovered, or clicked.
  • In order to highlight or diversify blocks, complex components, or even full app sections, you're free to use wisely Grey, Purple, Cyan, or other colors.
The ideas given in this post might be useful for designers who code (and learn React) and developers who aimed for a polished interfaces, as our coders are. Learn more about our services, if you're looking for a team of professionals dedicated to design & code beautiful components and web apps. Figma, Webflow, React, Angular and other stacks are not only we're capable of. Hire us!
More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Appbar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Appbar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Dropdown UI design – A guide for Anatomy, UX tips, and Use cases
Unlock the power of Dropdowns. Discover the core elements, custom theming options, usability tips, and accessibility best practices. Design Dropdowns that captivate users and align with your brand's persona. Ready to embark on this design adventure? Let's dive in!
Chips UI Design – An essential tutorial for optimal UX & usability
Learn the step-by-step process of Chip design. Take a deep dive into component design and learn step-by-step with this comprehensive tutorial, including: Chips anatomy, States, Use cases and Usability tips.
Input UI Design – Optimize data forms UX with expertly crafted text fields
Follow this in-depth guide to create Input components that blend seamlessly with your app UI design, while optimizing forms filling experience and overall usability.
Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases
This tutorial is dedicated to providing practical answers to your Checkbox design dilemmas: from addressing the complexity of Checkbox styling to solving the challenges of ensuring an inclusive UX.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎