Switch

The Switch component is used as an alternative for the checkbox component, switch between enabled or disabled states.

Installation

yarn add @chakra-xui/switch

# or

npm i @chakra-xui/switch

Import component

import { Switch } from "@chakra-xui/switch"

Usage

<Switch />

Sizes

Pass the size prop to change the size of the switch.

<>
  <Switch size="sm" marginLeft="1rem" colorScheme="green" />

  <Switch size="md" marginLeft="1rem" colorScheme="green" />

  <Switch size="lg" marginLeft="1rem" colorScheme="green" />
</>

Switch background-color

You can change the checked background color of the switch by passing the colorScheme prop

<Switch colorScheme="blue" />

Change Log

1.0.3

Patch Changes

• Updated dependencies [1e6db1e0]:
  • @chakra-xui/checkbox@1.1.0

1.0.2

Patch Changes

• Updated dependencies [5bff79a1, e73878ee]:
  • @chakra-xui/checkbox@1.0.2
  • @chakra-xui/utils@1.0.2

1.0.1

Patch Changes

• Updated dependencies [5c482483]:
  • @chakra-xui/utils@1.0.1
  • @chakra-xui/checkbox@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

• toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @chakra-xui/switch

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @chakra-xui/switch

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @chakra-xui/switch

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @chakra-xui/switch

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @chakra-xui/switch

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

• #891 (e107acc)
• import statement in tests and stories for switch component (e107dd9)
• ts issue with sx prop (d3b1340)
• typos (07f1205)
• typos (25867c4)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

• #891 (e107acc)
• import statement in tests and stories for switch component (e107dd9)
• ts issue with sx prop (d3b1340)
• typos (07f1205)
• typos (25867c4)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes

• #891 (e107acc)
• import statement in tests and stories for switch component (e107dd9)
• typos (07f1205)
• typos (25867c4)