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
Checkmark Icon
BoxSide
Style & Class
Component's Style & Class:
Styles & Classes:
Visibility
Visible: [
]
Hidden: [
]
Collapsed: [ ]
Indeterminate
Controlled
Value:
Indeterminate:
LabelTemplate
Custom content
Validation
Implementation
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. |
| BoxSide | BitCheckBoxSide | BitCheckBoxSide.Start | Determines whether the checkbox should be shown before the label (start) or after (end). |
| CheckmarkIconName | string | Accept | Custom icon for the check mark rendered by the checkbox instead of default check mark icon. |
| CheckmarkIconAriaLabel | 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. |
| DefaultIsIndeterminate | 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. |
| IsIndeterminate | bool | false | Callback that is called when the IsIndeterminate parameter changed. |
| 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. |
| OnChange | EventCallback<bool> | Callback that is called when the checked value has changed. | |
| OnClick | EventCallback<MouseEventArgs> | Callback for when the checkbox clicked. | |
| 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. |
| Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
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. |
| 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 |
|---|---|---|---|
| Container | string? | null | Custom CSS classes/styles for the container 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. |
BitBoxSide enum
Name |
Value |
Description |
|---|---|---|
| Start | 0 | The checkbox shows before the label. |
| End | 1 | The checkbox shows after the label. |
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). |