Checkbox
ready
A checkbox component that lets users select or deselect an option.
Loading
Code
HTML
import { NbhdCheckbox } from '@fbin-web/neighborhood-core';<nbhd-checkbox label="Checkbox Label" id="checkbox-1">
</nbhd-checkbox>React
import { NbhdCheckbox } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdCheckbox
label="Checkbox Label"
id="checkbox-1"></NbhdCheckbox>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label
|
label
|
string
|
The label text for the checkbox. | |
value
|
value
|
string
|
The value of the checkbox. | |
title
|
title
|
string
|
The title of the checkbox. | |
name
|
name
|
string
|
The name of the checkbox. | |
form
|
form
|
string
|
The form the checkbox is associated with. | |
id
|
id
|
string
|
The id of the checkbox. | |
cssClass
|
css-class
|
string
|
Additional CSS classes to apply to the checkbox. | |
ariaLabel
|
aria-label
|
string
|
Descriptive text for additional context. | |
disabled
|
disabled
|
boolean
|
false
|
Disables the checkbox from being selected. |
checked
|
checked
|
boolean
|
false
|
Whether the checkbox is checked initially. |
required
|
required
|
boolean
|
false
|
Whether the checkbox is required. |
dark
|
dark
|
boolean
|
false
|
Applies dark theme styling to the checkbox. |
Slots
| Name | Description |
|---|---|
label
|
Custom content for the checkbox label. Defaults to the label property value. |
CSS Parts
| Name | Description |
|---|---|
base
|
The form control wrapper div. |
label
|
The label element for the checkbox. |
label-slot
|
The slot element inside the label. |
label-text
|
The text element that displays the label content. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-checkboxLabel-color
|
var(--nbhd-color-black) |
--nbhd-checkboxLabel-fontSize
|
var(--nbhd-fontSize-regular) |
--nbhd-checkboxLabel-fontFamily
|
var(--nbhd-fontFamily, inherit) |
--nbhd-checkboxLabel-fontWeight
|
var(--nbhd-fontWeight-400, 400) |
--nbhd-checkboxLabel-paddingInline
|
var(--nbhd-space-9, 36px) var(--nbhd-space-0, 0) |
--nbhd-checkbox-borderColor
|
var(--nbhd-color-gray) |
--nbhd-checkbox-backgroundColor
|
transparent |
--nbhd-checkboxLabel-color-dark
|
var(--nbhd-color-white) |
--nbhd-checkbox-borderColor-dark
|
var(--nbhd-color-white) |
--nbhd-checkbox-borderColor-selected
|
var(--nbhd-color-black) |
--nbhd-checkbox-backgroundColor-selected
|
var(--nbhd-color-black) |
--nbhd-checkbox-borderColor-selected-dark
|
var(--nbhd-color-white) |
--nbhd-checkbox-backgroundColor-selected-dark
|
var(--nbhd-color-white) |
Dependencies
This component contains the following components as dependencies.