Checkbox

Graphical widget that allows the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options.

Usage

Code Editor
Copy
import { Checkbox } from '@erudilabs/alma'

Component

Here preview and detail explain of Checkbox component


Default

Code Editor
Copy
<Checkbox name="term_and_conditions">I agree with terms and condition</Checkbox>

Disabled

Code Editor
Copy
<Checkbox name="term_and_conditions_disabled" disabled>I agree with terms and condition</Checkbox>

Helper

This checkbox using a helper text

Code Editor
Copy
<Checkbox name="term_and_conditions_helper" helper="This checkbox using a helper text">I agree with terms and condition</Checkbox>

Error

An unexpected error occurred. Please try again later

Code Editor
Copy
<Checkbox name="term_and_conditions_error" errorMessage="An unexpected error occurred. Please try again later">I agree with terms and condition</Checkbox>

Props Reference

Prop
Type

testId?

string

className?

string

children

ReactNode

name

string

helper?

ReactNode

errorMessage?

string

defaultChecked?

string

disabled?

boolean

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void