Checkbox (Item)

Example

import { components } from "replugged";
const { CheckboxItem } = components;

export function Settings(): React.ReactElement {
  return <CheckboxItem {...util.useSetting(cfg, "foo", "bar")}>Checkbox title</CheckboxItem>;
}

Enums

Enum	Description
Checkbox.Aligns	Checkbox alignments TOP | CENTER
Checkbox.Shapes	Checkbox shapes BOX | ROUND | SMALL
Checkbox.Types	Checkbox types DEFAULT | INVERTED | GHOST | ROW

Props

Name	Type	Default	Description
align	Checkbox.Aligns	Checkbox.Aligns.CENTER	Alignment of the elements inside the checkbox
checkboxColor	string		Checkbox border color
className	string		Component class name
color	string	var(--brand-500)	Checkbox color; variable name must be used with the var() function
disabled	boolean	false	Whether the checkbox is disabled
displayOnly	boolean	false	Whether the checkbox is a static element
innerClassName	string		Checkbox element class name
onChange	(event: ChangeEvent<HTMLInputElement>, value: boolean) => void		Function ran on value change
onClick	MouseEventHandler<HTMLInputElement>		Function ran on checkbox click
readOnly	boolean	false	Whether the checkbox is read only
reverse	boolean	false	Whether the checkbox position is on the right side
shape	Checkbox.Shapes	Checkbox.Shapes.BOX	Define checkbox shape
size	number	24	Checkbox width and height
style	CSSProperties		Component style
type	Checkbox.Types	Checkbox.Types.DEFAULT	Define checkbox type
value	boolean	false	Checkbox state