Use our AstroLaunch UI Switch component to let users adjust settings on/off. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
See below our example that will help you create simple and easy-to-use switch component for your AstroLaunch UI and React project.
Make a Switch component checked by default using the defaultChecked props.
The Switch component comes with 19 different colors that you can change it using the color prop.
You can add a label for the Switch component by passing the label prop to the Switch component.
You can turn on/off the ripple effect for the Switch component using the ripple prop.
You can make a switch disable by passing the disabled prop to the Switch component.
Use the example below for a more complex usage of switch with label that contains some description.
You can use the className, containerProps, circleProps and labelProps prop to add custom styles to the Switch component.
The following props are available for switch component. These are the custom props that we've added for the switch component and you can use all the other native input props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
color | Color | Change switch color | gray |
label | node | Add label for switch | undefined |
ripple | boolean | Add ripple effect for switch | true |
className | string | Add custom className for switch | '' |
disabled | boolean | Makes the switch disabled | false |
containerProps | object | Add custom props for switch container | undefined |
labelProps | object | Add custom props for switch label | undefined |
circleProps | object | Add custom props for switch circle | undefined |
inputRef | ref | Add reference for input element. | undefined |
import type { SwitchProps } from "@material-tailwind/react";type color =
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";Learn how to customize the theme and styles for switch component, the theme object for switch component has three main objects:
A. The defaultProps object for setting up the default value for props of switch component.
B. The valid object for customizing the valid values for switch component props.
C. The styles object for customizing the theme and styles of switch component.
You can customize the theme and styles of switch component by adding Tailwind CSS classes as key paired values for objects.
interface SwitchButtonStylesType {
defaultProps: {
color: string;
label: string;
ripple: boolean;
className: string;
disabled: boolean;
containerProps: object;
labelProps: object;
circleProps: object;
};
valid: {
colors: string[];
};
styles: {
base: {
root: object;
container: object;
input: object;
circle: object;
ripple: object;
label: object;
disabled: object;
};
colors: object;
};
}import type { SwitchButtonStylesType } from "@material-tailwind/react";const theme = {
switch: {
defaultProps: {
color: "blue",
label: "",
ripple: true,
className: "",
disabled: false,
containerProps: undefined,
labelProps: undefined,
circleProps: undefined,
},
valid: {
colors: [
"blue-gray",
"gray",
"brown",
"deep-orange",
"orange",
"amber",
"yellow",
"lime",
"light-green",
"green",
"teal",
"cyan",
"light-blue",
"blue",
"indigo",
"deep-purple",
"purple",
"pink",
"red",
],
},
styles: {
base: {
root: {
display: "inline-flex",
alignItems: "items-center",
},
container: {
position: "relative",
display: "inline-block",
width: "w-8",
height: "h-4",
cursor: "cursor-pointer",
borderRadius: "rounded-full",
},
input: {
peer: "peer",
appearance: "appearance-none",
width: "w-8",
height: "h-4",
position: "absolute",
background: "bg-blue-gray-100",
borderRadius: "rounded-full",
cursor: "cursor-pointer",
transition: "transition-colors duration-300",
},
circle: {
bg: "bg-white",
width: "w-5",
height: "h-5",
borderWidth: "border",
borderColor: "border-blue-gray-100",
borderRadius: "rounded-full",
boxShadow: "shadow-md",
position: "absolute",
top: "top-2/4",
left: "-left-1",
transform: "-translate-y-2/4 peer-checked:translate-x-full",
transition: "transition-all duration-300",
cursor: "cursor-pointer",
before: {
content: "before:content['']",
display: "before:block",
bg: "before:bg-blue-gray-500",
width: "before:w-10",
height: "before:h-10",
borderRadius: "before:rounded-full",
position: "before:absolute",
top: "before:top-2/4",
left: "before:left-2/4",
transform: "before:-translate-y-2/4 before:-translate-x-2/4",
transition: "before:transition-opacity",
opacity: "before:opacity-0 hover:before:opacity-10",
},
},
ripple: {
display: "inline-block",
top: "top-2/4",
left: "left-2/4",
transform: "-translate-x-2/4 -translate-y-2/4",
p: "p-5",
borderRadius: "rounded-full",
},
label: {
color: "text-gray-700",
fontWeight: "font-light",
userSelect: "select-none",
cursor: "cursor-pointer",
mt: "mt-px",
ml: "ml-3",
mb: "mb-0",
},
disabled: {
opacity: "opacity-50",
pointerEvents: "pointer-events-none",
},
},
colors: {
"blue-gray": {
input: "checked:bg-blue-gray-500",
circle: "peer-checked:border-blue-gray-500",
before: "peer-checked:before:bg-blue-gray-500",
},
gray: {
input: "checked:bg-gray-500",
circle: "peer-checked:border-gray-500",
before: "peer-checked:before:bg-gray-500",
},
brown: {
input: "checked:bg-brown-500",
circle: "peer-checked:border-brown-500",
before: "peer-checked:before:bg-brown-500",
},
"deep-orange": {
input: "checked:bg-deep-orange-500",
circle: "peer-checked:border-deep-orange-500",
before: "peer-checked:before:bg-deep-orange-500",
},
orange: {
input: "checked:bg-orange-500",
circle: "peer-checked:border-orange-500",
before: "peer-checked:before:bg-orange-500",
},
amber: {
input: "checked:bg-amber-500",
circle: "peer-checked:border-amber-500",
before: "peer-checked:before:bg-amber-500",
},
yellow: {
input: "checked:bg-yellow-500",
circle: "peer-checked:border-yellow-500",
before: "peer-checked:before:bg-yellow-500",
},
lime: {
input: "checked:bg-lime-500",
circle: "peer-checked:border-lime-500",
before: "peer-checked:before:bg-lime-500",
},
"light-green": {
input: "checked:bg-light-green-500",
circle: "peer-checked:border-light-green-500",
before: "peer-checked:before:bg-light-green-500",
},
green: {
input: "checked:bg-green-500",
circle: "peer-checked:border-green-500",
before: "peer-checked:before:bg-green-500",
},
teal: {
input: "checked:bg-teal-500",
circle: "peer-checked:border-teal-500",
before: "peer-checked:before:bg-teal-500",
},
cyan: {
input: "checked:bg-cyan-500",
circle: "peer-checked:border-cyan-500",
before: "peer-checked:before:bg-cyan-500",
},
"light-blue": {
input: "checked:bg-light-blue-500",
circle: "peer-checked:border-light-blue-500",
before: "peer-checked:before:bg-light-blue-500",
},
blue: {
input: "checked:bg-blue-500",
circle: "peer-checked:border-blue-500",
before: "peer-checked:before:bg-blue-500",
},
indigo: {
input: "checked:bg-indigo-500",
circle: "peer-checked:border-indigo-500",
before: "peer-checked:before:bg-indigo-500",
},
"deep-purple": {
input: "checked:bg-deep-purple-500",
circle: "peer-checked:border-deep-purple-500",
before: "peer-checked:before:bg-deep-purple-500",
},
purple: {
input: "checked:bg-purple-500",
circle: "peer-checked:border-purple-500",
before: "peer-checked:before:bg-purple-500",
},
pink: {
input: "checked:bg-pink-500",
circle: "peer-checked:border-pink-500",
before: "peer-checked:before:bg-pink-500",
},
red: {
input: "checked:bg-red-500",
circle: "peer-checked:border-red-500",
before: "peer-checked:before:bg-red-500",
},
},
},
},
};