Checkbox
An implementation of a checkbox web-component.
<FluentCheckbox> wraps the <fluent-checkbox> element, a web component implementation of acheckbox, leveraging the Fluent UI design system.
Examples
Default checkbox examples
Horizontal
Vertical
Download:
Three States
Value = False - CheckState = False
Value = False
Value = False - CheckState = null (Indeterminate)
Download:
Three States List
Download:
Documentation
FluentCheckbox Class
Inherits from FluentInputBase<bool>.
There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
Autofocus | bool | False | Determines if the element should receive document focus on page load. |
CheckState | bool? | False | Gets or sets the state of the CheckBox: true, false or null. |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Disabled | bool | False | Disables the form control, ensuring it doesn't participate in form submission. |
DisplayName | string? | Gets or sets the display name for this field. | |
Embedded | bool | False | Gets or sets if the derived component is embedded in another component. If true, the ClassValue property will not include the EditContext's FieldCssClass. |
Field | FieldIdentifier? | Gets or sets the FluentInputBase that identifies the bound value.If set, this parameter takes precedence over FluentInputBase. | |
Immediate | bool | False | Change the content of this input field when the user write text (based on 'OnInput' HTML event). |
ImmediateDelay | int | 0 | Gets or sets the delay, in milliseconds, before to raise the FluentInputBase event. |
Label | string? | Gets or sets the text to label the input. This is usually displayed just above the input | |
LabelTemplate | RenderFragment? | Gets or sets the content to label the input component. This is usually displayed just above the input | |
Name | string? | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. | |
Placeholder | string? | Gets or sets the short hint displayed in the input before the user enters a value. | |
ReadOnly | bool | False | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Required | bool | False | Gets or sets a value indicating whether the element needs to have a value. |
ShowIndeterminate | bool | True | Gets or sets a value indicating whether the user can display the indeterminate state by clicking the CheckBox. If this is not the case, the checkbox can be started in the indeterminate state, but the user cannot activate it with the mouse. Default is true. |
ThreeState | bool | False | Gets or sets a value indicating whether the CheckBox will allow three check states rather than two. |
ThreeStateOrderUncheckToIntermediate | bool | False | Gets or sets a value indicating the order of the three states of the CheckBox. False (by default), the order is Unchecked -> Checked -> Intermediate. True: the order is Unchecked -> Intermediate -> Checked. |
Value | bool | False | Gets or sets the value of the input. This should be used with two-way binding. |
ValueExpression | Expression<Func<bool>>? | Gets or sets an expression that identifies the bound value. |
EventCallbacks
Name | Type | Description |
|---|---|---|
CheckStateChanged | EventCallback<bool?> | Gets or sets a callback that updates the FluentCheckbox.CheckState. |
ValueChanged | EventCallback<bool> | Gets or sets a callback that updates the bound value. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |