Checkbox
ready

A checkbox component that lets users select or deselect an option.

Example

icon-storybook-default View Storybook
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.

Slots

Name Description
label Custom content for the checkbox label. When omitted, the label property value is rendered.

CSS Parts

Name Description
base The wrapper div for the checkbox form control.
label The label element for the checkbox.
label-slot The named label slot inside the checkbox label.
label-text The fallback text element that displays the label property value.

CSS Properties

Property Default Value
--nbhd-checkbox-box-borderRadius 2px
--nbhd-checkbox-indicator-borderRadius 0

Dependencies

This component contains the following components as dependencies.