Skip to main content
⌘K
Last modified: 24/Jun/2024

Switch

Use the switch to toggle boolean properties. It’s often used to turn functions on or off.

Check out the Figma documentation here.

#Usage

import { Switch } from '@kinsta/stratus'


const MyComponent = () => (
  <Switch label="These aren't the droids you're looking for" />
)

#Props

The Swtich components interface extends the HTMLInputElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style).

#isDense
boolean
@deprecated It's going to be removed in a future version and will be replaced with size prop
#isLoading
boolean
false
#isChecked
boolean
Decides whether it is checked or not.
false
#isDisabled
boolean
Decides whether it is disabled.
false
#isIndeterminate
boolean
#isInFocus
boolean
Decides whether it has focus on it.
#onChange
(event: ChangeEvent<HTMLInputElement>) => void
Handler that is called when the checkbox changes.
#id
string
#conditionalSlot
ReactElement<any, string | JSXElementConstructor<any>>
It renders elements conditionally from the isSelected prop.
#description
string | ReactElement<any, string | JSXElementConstructor<any>>
It adds a description text under the label. This is not required, because you might use the element without it.
#errorMessage
string | ReactElement<any, string | JSXElementConstructor<any>>
Renders and error text below the label.
#label
ReactNode
Label of the element. This is not required, because you might use the element standalone. If so, you should care about the proper accessibility of the element.
#hasAutoFocus
boolean
Decides whether it has automatically focus on it.
#isInGroup
boolean
Removes the element from the tab flow. The tab navigation is disabled between the group items, but the arrow navigation is available instead. It's always set to true in the Group component.

#Types

  • SwitchProps: props of the Switch component processed by stratus (including onChange)
  • SwitchInterface: SwitchProps extended by Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>

Read more about types here