Biofarma | Bind UI

Checkbox

Checkboxes are used in forms when users need to select multiple options from a list.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Label

Usage

import { Checkbox } from 'bio-bind-ui';

<Checkbox
  id='checkboxName'
  label='Label'
  labelPosition='right'
  mode='light'
  name='checkboxName'
  checked='true'
  onChange={() => {}}
  size='md'
  variant='primary'
/>

Examples

Checkbox Variant

Set the variant prop to primary or secondary for different style.

Primary

Secondary

Checkbox Size

Set the size prop to sm, md or lg for different size.

Checkbox SM

Checkbox MD

Checkbox LG

Label Position (optional)

Use labelPosition to set label right or left

Checkbox Label on the Right

Checkbox Label on the Left

Mode (optional)

Use mode to use dark or light

Checkbox Light Mode

Checkbox Dark Mode

Props

Props	Required	Default	Type	description
label	true	-	`string`	The label text for the checkbox.
labelPosition	false	`right`	`left` `right`	The label position to the checkbox.
style	false	-	`CSSProperties`	Custom styles for the checkbox component.
mode	false	`light`	`light` `dark`	The theme mode of the checkbox (`light` or `dark`).
id	false	-	`string`	A unique identifier for the checkbox.
name	false	-	`string`	Name for the checkbox.
variant	false	`primary`	`primary` `secondary`	The visual color variant of the checkbox.
size	false	`md`	`sm` `md` `lg`	The size of checkbox.
disabled	false	`false`	`true` `false`	If true, checkbox will be set to disabled state
checked	false	`false`	`true` `false`	If true, checkbox will be set to checked state.
isError	false	`false`	`true` `false`	If true, checkbox will be set to error state.
onChange	false	-	`function`	Callback function to run when the checkbox is clicked.
intermediate	false	`false`	`true` `true`	If true, checkbox will be set to indeterminate state.

Tooltip Date Time Picker