Skip to content

Checkbox

Checkbox selection input type
import { Checkbox } from '@ensdomains/thorin'

Props
#

name
type
default
description
background
"white" | "grey"
grey
Set the background color for regular variant.
border
boolean
false
Adds a border to regular variant or uses alternative styling for switch variant.
checked
boolean
-
The checked attribute of input element
color
any
blue
Set the highlight color.
defaultChecked
boolean
-
The initial value for checked of input element
defaultValue
string | number
-
The initial value of the input element
description
ReactNode
-
Description text or react component.
disabled
boolean
-
The disabled attribute of input element
error
ReactNode
-
Error text or a react component.
gradient
boolean
false
Use gradient color for background color of switch variant.
hideLabel
boolean
-
If true, hides the label and secondary label.
id
string
-
The id attribute of input element.
inline
boolean
true
If true, moves the label and status messages to the right of the content.
label*
Required
ReactNode
-
Label content Label text or react component
name
string
-
The name attribute of input element.
tabIndex
number
-
The tabindex attribute for input element.
value
string | number
-
The value attribute of input element.
onChange
ChangeEventHandler<HTMLInputElement>
-
The handler for change events.
onFocus
FocusEventHandler<HTMLInputElement>
-
The handler for focus events.
onBlur
FocusEventHandler<HTMLInputElement>
-
The handler for blur events.
labelPlacement
"top" | "bottom" | { error?: Placement | undefined; description?: Placement | undefined; }
-
Set the placement of the error and description. Does not affect inline mode.
labelRight
boolean
-
Have lavel appear on the right of the form element.
labelSecondary
ReactNode
-
Secondary text or react component
readOnly
boolean
-
Set the input to readonly mode
ref
Ref<HTMLInputElement>
-
-
required
boolean
-
Adds mark to label
size
"small" | "medium" | "large"
small
The size of the checkbox.
variant
"regular" | "switch"
regular
The ui styling of component.
width
any
-
A tokens space key value setting the width of the parent element.

Variants
#

Color
#

Checkbox

Switch

Sizes
#

Checkbox

Switch

Border
#

Checkbox

Switch

Background
#

A checkbox only property to control background color

Gradient
#

A switch only property

Edit on GitHub