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
Check icon
Label position
Style & Class
Component's Style & Class:
Styles & Classes:
Indeterminate
Binding
Value:
Indeterminate:
LabelTemplate
Custom content
Validation
RTL
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. |
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 |
---|---|---|---|
DebounceTime | int | 0 | The debounce time in milliseconds. |
DisplayName | string? | null | Gets or sets the display name for this field. |
Immediate | bool | false | Change the content of the input field when the user write text (based on 'oninput' HTML event). |
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. | |
ThrottleTime | int | 0 | The throttle time in milliseconds. |
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. |
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. |