Checkbox
An independent checkbox with a label.
onChange receives checked, value, and the event. indeterminate shows partial selection, and description adds text below the label.
Live example
Example controls
Usage
'use client';
import { Checkbox } from '@prosazhin/pbcomponents';
import { useState } from 'react';
function Example() {
const [checked, setChecked] = useState(false);
return (
<Checkbox
value='one'
checked={checked}
onChange={setChecked}
>
Label
</Checkbox>
);
}Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | string | Component content. | — |
size | 's' | 'm's · m | Component size. | m |
labelPlace | 'left' | 'right'left · right | Label position relative to the control. | right |
checked | boolean | Current selected state. | false |
disabled | boolean | Disables interaction. | false |
indeterminate | boolean | Mixed state, for example when some items are selected. | false |
description | ReactNode | Secondary text below the label. | — |
value | string | Form item value. | — |
onChange | (checked: boolean, value: string, event: InputEvent) => void | Reports the new checked state and item value. | — |
className | string | Class of the root element. | — |
wrapperClassName | string | Class of the outer wrapper. | — |
textClassName | string | Class of the text part. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.