Last modified: 4/Oct/2024
Checkbox
Use the checkbox when there are multiple options provided to the user for selection.
Check out the Figma documentation [here](Check out the Figma documentation here. "Figma documentation").
#Usage
import { Checkbox } from '@kinsta/stratus'
const MyComponent = () => (
<>
<Checkbox label="Hello there" />
</>
)
#Props
The Checkbox 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).
#isChecked
boolean
Decides whether it is checked or not.
#isDisabled
boolean
Decides whether it is disabled.
#isIndeterminate
boolean
#isInFocus
boolean
Decides whether it has focus on it.
#value
string
The identifier of the element
#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
CheckboxProps: props of theCheckboxcomponent processed by stratus (this includesvalueandonChange)CheckboxInterface:CheckboxPropsextended byOmit<Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, 'onChange'>
Read more about types here