Skip to main content

Checkbox

Uncontrolled​

Result
Loading...
Live Editor
<div data-testid="pw-checkbox-1">
	<Checkbox label="Checkbox" defaultSelected />
</div>

Controlled​

Result
Loading...
Live Editor
function Example() {
	const [isSelected, setIsSelected] = React.useState(false);

	return <Checkbox label="Checkbox" isSelected={isSelected} onChange={setIsSelected} />;
}

Description​

Result
Loading...
Live Editor
<Checkbox label="Checkbox" description="Checkbox description" />

Indeterminate​

Result
Loading...
Live Editor
<Checkbox label="Checkbox" defaultSelected isIndeterminate />

Sizes​

Result
Loading...
Live Editor
<>
	<Checkbox label="Small" size="sm" />
	<Checkbox label="Medium" size="md" />
	<Checkbox label="Large" size="lg" />
	<Checkbox label="Extra Large" size="xl" />
</>

States​

Result
Loading...
Live Editor
<>
	<Checkbox label="Valid Checkbox" isValid validText="Valid text" />
	<Checkbox label="Error Checkbox" isInvalid errorText="Error text" />
	<Checkbox label="Warning Checkbox" isWarning warningText="Warning Text" />
	<Checkbox label="Edited Checkbox" isEdited editedText="Edited Text" />
</>

Light​

Used when the checkbox is on a dark background

Result
Loading...
Live Editor
<div className="p-3 bg-primary">
	<Checkbox label="Checkbox" light description="Checkbox description" />
</div>

Within a Form​

Result
Loading...
Live Editor
<div data-testid="within-form">
	<Form
		initialValues={{}}
		onSubmit={async (values, { setSubmitting }) => {
			console.log(values);
			setSubmitting(false);
		}}
		validationSchema={object().shape({
			checkbox: boolean().required().oneOf([true], 'Checkbox must be true.'),
		})}
	>
		<FormField>
			<Checkbox label="Checkbox" name="checkbox" />
		</FormField>
	</Form>
</div>

Analytics​

The Checkbox component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Checkbox',
	actions: {
		onChange: { type: 'CHECKBOX_CHANGE', payload: 'Change' },
	},
};

Props​