Toggle
A switch for a boolean setting.
onChange receives the next state, value, and the event. Use it for settings that take effect immediately. description adds text below the label.
Live example
Example controls
Usage
'use client';
import { Toggle } from '@prosazhin/pbcomponents';
import { useState } from 'react';
function Example() {
const [checked, setChecked] = useState(false);
return (
<Toggle
value='one'
checked={checked}
onChange={setChecked}
>
Label
</Toggle>
);
}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 |
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.