Chakra-UI

I♥️Components

Switch

|

Chakra Docs

|

⦾ The Switch component in Chakra UI serves as an alternative to the Checkbox component. It allows users to toggle between enabled and disabled states. Similar to a checkbox, a Switch must always be accompanied by a label and follows the same keyboard workflow. Let's explore the different aspects and functionalities of the Switch component.

The Switch component can be imported as follows:

Examples

Basic Usage

⦾ In the following example, we have a three Switch components wrapped inside a FormControl component, along with a label for each switch.

Code

Customizing Sizes

⦾ The Switch component provides different sizes through the size prop. You can use size='sm' for small, size='md' for medium, and size='lg' for large. Here's an example that demonstrates the different sizes.

Code

Customizing Color

⦾ The Switch component allows you to customize the checked background color by using the colorScheme prop. You can pass different color schemes, any of the following, to change the background color.

Code

State Behavior

⦾ The Switch component has various states that affect its usability and styles. These states include isDisabled,isChecked, isFocusable, isInvalid, isReadOnly, and isRequired. However, the isInvalid and isRequired props don't impact the styles. Here's an example demonstrating these states
  • isChecked: This state represents whether the Switch is checked or not. By setting the isChecked prop to true, the Switch will be initially checked.
  • isDisabled: When the isDisabled prop is set to true, the Switch becomes disabled and cannot be interacted with. It is commonly used to indicate that a particular option or feature is not available or applicable in the current context.
  • isFocusable: The isFocusable prop determines whether the Switch can receive focus or not. When both isFocusable and isDisabled are true, the Switch is visually disabled but can still receive focus. This can be useful for keyboard accessibility in certain scenarios.
  • isInvalid: The isInvalid prop is used to indicate that the Switch has an invalid or erroneous value. It typically triggers error styling, such as displaying a red border or showing an error message nearby. This state is useful for form validation.
  • isReadOnly: Setting the isReadOnly prop to true makes the Switch read-only, meaning the user cannot toggle its state. This is often used when displaying data or settings that cannot be modified.
  • isRequired: The isRequired prop is used to mark the Switch as a required input field. It indicates that the user must interact with the Switch to fulfill a form submission or satisfy certain criteria.

Code

Did you know?

Creative Idea No. 1

Color Mode Toggle: You can use the Switch component to create a Dark Mode toggle for your website. By utilizing the Switch's isChecked prop and integrating it with your preferred theming solution, users can easily switch between light and dark themes.
Dark Mode

Code

Creative Idea No. 2

Language Selector: Enhance your multilingual website by adding a language selector using the Switch component. Users can easily switch between different languages, triggering a language change event and updating the content accordingly.

🇬🇧

🇫🇷

Welcome to our wonderful place on the web, where dreams come true and today is always just the beginning!

Code

Creative Idea No. 3

Event-Driven Effects: This example illustrates how the Switch component can be used to drive visual changes on the screen. By toggling the switch, a color-altering effect, labeled here as "Rave Mode", is activated within the rave box. The colors alternate between cyan and deep pink every half second, creating a dynamic and lively visual. (There might be some music involved as well.) When Rave Mode is turned off, the container's colors transition back to a static black and gray. This demonstrates how user interactions can be utilized to control visual components on the screen.

😐

🪩

⛔️

⛔️

Caution: There is a rave in this box.

⛔️

⛔️

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.