Switch

The Switch component offers a stylish alternative to the Checkbox, allowing users to enable or disable an option with a sleek sliding motion. This component is perfect for adding a touch of elegance and interactivity to your user interface.
Installation
API Reference
Spec Doc
The current component is functioning as expected, but we have decided to rebuild it entirely to align with our vision and enhance its performance. It is primarily based on React Native, and while we have made minimal modifications so far, our upcoming rebuild will involve significant changes to ensure it closely matches our desired structure and meets our objectives.
This is an illustration of Switch component.
size
isDisabled
<Switch size="md" isDisabled={false} />

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/switch

Step 2: Copy and paste the following code into your project.

import { styled } from "@gluestack-style/react"
import { Switch as RNSwitch } from "react-native"
import { createSwitch } from "@gluestack-ui/switch"
const StyledRoot = styled(
RNSwitch,
{
props: {
// todo: add support for this in style.gluestack.io
// trackColor: { false: '$background300', true: '$primary600' },
// hacky fix for the above
//@ts-ignore
trackColor: { false: "$background300", true: "$primary600" },
thumbColor: "$background600",
//@ts-ignore
activeThumbColor: "$background200",
// for ios specifically in unchecked state
ios_backgroundColor: "$background300",
},
borderRadius: "$full",
variants: {
//@ts-ignore
size: {
sm: {
transform: [
{
scale: 0.75,
},
],
},
md: {},
lg: {
transform: [
{
scale: 1.25,
},
],
},
},
},
_web: {
":focus": {
outlineWidth: 0,
outlineColor: "$primary700",
outlineStyle: "solid",
},
},
defaultProps: {
size: "md",
},
":disabled": {
_web: {
cursor: "pointer",
":disabled": {
cursor: "not-allowed",
},
},
opacity: 0.4,
//@ts-ignore
trackColor: { false: "$background300", true: "$primary600" },
// for ios specifically in unchecked state
ios_backgroundColor: "$background300",
":hover": {
props: {
//@ts-ignore
trackColor: { false: "$background300", true: "$primary600" },
},
},
},
":invalid": {
borderColor: "$error700",
borderRadius: 12,
borderWidth: 2,
},
":hover": {
props: {
// todo: add support for this in style.gluestack.io
// trackColor: { false: '$background400', true: '$primary700' },
// hacky fix for the above
//@ts-ignore
trackColor: { false: "$background400", true: "$primary700" },
ios_backgroundColor: "$background400",
},
":invalid": {
props: {
// todo: add support for this in style.gluestack.io
// trackColor: { false: '$background400', true: '$primary700' },
// hacky fix for the above
//@ts-ignore
trackColor: { false: "$background300", true: "$primary700" },
},
},
},
":checked": {
props: {
//@ts-ignore
thumbColor: "$background0",
},
},
},
{
componentName: "Switch",
resolveProps: [
"thumbColor",
"trackColor",
"activeThumbColor",
"ios_backgroundColor",
],
} as const,
{
propertyTokenMap: {
trackColor: "colors",
thumbColor: "colors",
activeThumbColor: "colors",
ios_backgroundColor: "colors",
},
propertyResolver: {
trackColor: (rawValue: any, resolver: any) => {
const resolveColor = {
true: resolver(rawValue.true),
false: resolver(rawValue.false),
}
return resolveColor
},
},
}
)
export const Switch = createSwitch({
Root: StyledRoot,
})

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.
import { Switch } from "@/components/ui/Switch"
export default () => <Switch />

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Switch

Contains all switch related layout style props and actions. It inherits all the properties of React Native's Switch component.
Prop
Type
Default
Description
isDisabled
boolean
false
When true, the switch is disabled and cannot be toggled
isInvalid
boolean
false
When true, the switch displays an error state.
isRequired
boolean
false
When true, sets aria-required="true" on the switch.
isHovered
boolean
false
When true, the switch displays a hover state.
value
boolean
false
The value of the switch. If true the switch will be turned on.
defaultValue
boolean
false
The defaultValue of the switch. If true the switch will be turned on initially.
onToggle
() => any
-
Callback to be invoked when switch value is changed.

Accessibility

We have outlined the various features that ensure the Button component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the WAI-ARIA design pattern.

Keyboard

  • Tab: Moves focus to the next focusable element.
  • Space: Triggers the switch's action.

Screen Reader

  • VoiceOver: When the switch is focused, the screen reader will announce the switch's action and its current state.

Props

Switch component is created using Switch component from react-native. It extends all the props supported by React Native Switch, utility props and the props mentioned below.

Switch

Name
Value
Default
size
sm | md | lg
md

Spec Doc

Explore the comprehensive details of the Switch in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
Edit this page on GitHub