Checkbox
BitCheckbox is a component that permits the user to make a binary choice, a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' or 'no' on a simple yes/no question. Checkboxes by default are shown as ☐ when unchecked and ☑ when checked.
Usage
Basic
Basic usage of BitCheckbox with enabled and disabled states.
Check icon
Customize the check icon of BitCheckbox.
Reversed
Adjust the label position of BitCheckbox to be reversed.
LabelTemplate
Customizing the label of BitCheckbox using a template.
Indeterminate
Display BitCheckbox in an indeterminate state.
Binding
Demonstrates one-way and two-way data binding with BitCheckbox.
Value:
Indeterminate:
Custom content
Create a custom checkbox with unique content and style.
Style & Class
Explore styling and class customization for BitCheckbox, including component styles, custom classes, and detailed styles.
Component's Style & Class:
Styles & Classes:
Validation
Use data annotations to validate the BitCheckbox component.
RTL
Use BitCheckbox in right-to-left (RTL).
API
BitCheckbox parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaDescription | string? | null | Detailed description of the checkbox for the benefit of screen readers. |
| AriaLabelledby | string? | null | ID for element that contains label information for the checkbox. |
| AriaPositionInSet | int? | null | The position in the parent set (if in a set) for aria-posinset. |
| AriaSetSize | int? | null | The total size of the parent set (if in a set) for aria-setsize. |
| CheckIconName | string | Accept | Custom icon for the check mark rendered by the checkbox instead of default check mark icon. |
| CheckIconAriaLabel | string? | null | The aria label of the icon for the benefit of screen readers. |
| ChildContent | RenderFragment? | null | Used to customize the content of checkbox(Label and Box). |
| Classes | BitCheckboxClassStyles? | null | Custom CSS classes for different parts of the BitCheckbox. |
| DefaultIndeterminate | bool? | null | Default indeterminate visual state for checkbox. |
| DefaultValue | bool? | null | Use this if you want an uncontrolled component, meaning the Checkbox instance maintains its own state. |
| Indeterminate | bool | false | An indeterminate visual state for checkbox. Setting indeterminate state takes visual precedence over checked given but does not affect on Value state. |
| Label | string? | null | Descriptive label for the checkbox. |
| LabelTemplate | RenderFragment? | null | Used to customize the label for the checkbox. |
| Name | string? | null | Name for the checkbox input. This is intended for use with forms and NOT displayed in the UI. |
| OnClick | EventCallback<MouseEventArgs> | Callback for when the checkbox clicked. | |
| Reversed | bool | false | Reverses the label and checkbox location. |
| Styles | BitCheckboxClassStyles? | null | Custom CSS styles for different parts of the BitCheckbox. |
| Title | string? | null | Title text applied to the root element and the hidden checkbox input. |
BitInputBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| DisplayName | string? | null | Gets or sets the display name for this field. |
| InputHtmlAttributes | IReadOnlyDictionary<string, object>? | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
| Name | string? | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| OnChange | EventCallback<TValue?> | Callback for when the input value changes. | |
| ReadOnly | bool | false | Makes the input read-only. |
| Required | bool | false | Makes the input required. |
| Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
BitInputBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| InputElement | ElementReference | The ElementReference of the input element. | |
| FocusAsync() | () => ValueTask | Gives focus to the input element. | |
| FocusAsync(bool preventScroll) | (bool preventScroll) => ValueTask | Gives focus to the input element. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| Dir | BitDir? | null | Determines the component direction. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
BitCheckboxClassStyles properties
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitCheckBox. |
| Container | string? | null | Custom CSS classes/styles for the container of the BitCheckbox. |
| Checked | string? | null | Custom CSS classes/styles for the checked state of the BitCheckbox. |
| Box | string? | null | Custom CSS classes/styles for the box element of the BitCheckbox. |
| Icon | string? | null | Custom CSS classes/styles for the icon of the BitCheckbox. |
| Label | string? | null | Custom CSS classes/styles for the label of the BitCheckbox. |
BitVisibility enum
Name |
Value |
Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
Name |
Value |
Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
- On this page