Switch
Capture boolean input from user
Import
Source
Docs
Package
Usage
LabelPosition
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Color
Controlled
Inner Labels
Icon labels
Thumb icon
Switch.Group
Select your favorite framework/library
This is anonymous
Orientation
Spacing
xs
sm
md
lg
xl
Offset
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Controlled Switch.Group
Get input ref
Accessibility
Switch is a regular input with checkbox type. Provide aria-label
if Switch is used without label
:
Switch component props
Name | Type | Description |
---|---|---|
color | MantineColor | Switch checked state color from theme.colors, defaults to theme.primaryColor |
description | ReactNode | description, displayed after label |
error | ReactNode | Displays error message after input |
id | string | Id is used to bind input and label, if not passed unique id will be generated for each input |
label | ReactNode | Switch label |
labelPosition | "left" | "right" | Position of label |
offLabel | ReactNode | Inner label when Switch is in unchecked state |
onLabel | ReactNode | Inner label when Switch is in checked state |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Radius from theme.radius or number to set border-radius in px |
size | "xs" | "sm" | "md" | "lg" | "xl" | Predefined size value |
thumbIcon | ReactNode | Icon inside the thumb of switch |
wrapperProps | Record<string, any> | Props spread to wrapper element |
Switch.Group component props
Name | Type | Description |
---|---|---|
children * | ReactNode | <Checkbox /> components only |
defaultValue | string[] | Initial value for uncontrolled component |
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
offset | number | "xs" | "sm" | "md" | "lg" | "xl" | Space between label and inputs |
onChange | (value: string[]) => void | Called when value changes |
orientation | "horizontal" | "vertical" | Horizontal or vertical orientation |
required | boolean | Adds required attribute to the input and red asterisk on the right side of label |
size | "xs" | "sm" | "md" | "lg" | "xl" | Predefined label fontSize, checkbox width, height and border-radius |
spacing | number | "xs" | "sm" | "md" | "lg" | "xl" | Spacing between checkboxes in horizontal orientation |
value | string[] | Value of currently selected checkbox |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
wrapperProps | Record<string, any> | Props spread to InputWrapper |
Switch component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-Switch-root | Root element |
input | .mantine-Switch-input | Checkbox input |
labelWrapper | .mantine-Switch-labelWrapper | Include label and description component |
body | .mantine-Switch-body | Container Of Switch |
track | .mantine-Switch-track | Track |
thumb | .mantine-Switch-thumb | Thumb of Switch |
trackLabel | .mantine-Switch-trackLabel | onLabel and offLabel |
error | .mantine-Switch-error | Error message |
description | .mantine-Switch-description | Description |
label | .mantine-Switch-label | Label |