Switch

An implementation of a switch.

<FluentSwitch> wraps the <fluent-switch> element, a web component implementation of a switch leveraging the Fluent UI design system.

Examples

Default

Example
Dark Mode New Feature On Off Theme Dark Light

New feature: True

Download: 

States

Example

Checked

Initial checkedOnOff

Checked state: True

Required

Disabled

label checked checkedOnOff
Download: 

Inline

Example
Light Speed Ridiculous Speed Ludicrous Speed Plaid Speed
Download: 

Documentation

FluentSwitch 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
AriaLabelstring?
Gets or sets the text used on aria-label attribute.
Autofocusbool
False
Determines if the element should receive document focus on page load.
CheckedMessagestring?
Gets or sets the checked message
ChildContentRenderFragment?
Gets or sets the content to be rendered inside the component.
Disabledbool
False
Disables the form control, ensuring it doesn't participate in form submission.
DisplayNamestring?
Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
Embeddedbool
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.
FieldFieldIdentifier?
Gets or sets the FluentInputBase.FieldIdentifier that identifies the bound value.
If set, this parameter takes precedence over FluentInputBase.ValueExpression.
Immediatebool
False
Change the content of this input field when the user write text (based on 'OnInput' HTML event).
ImmediateDelayint
0
Gets or sets the delay, in milliseconds, before to raise the FluentInputBase.ValueChanged event.
Labelstring?
Gets or sets the text to label the input.
This is usually displayed just above the input
LabelTemplateRenderFragment?
Gets or sets the content to label the input component.
This is usually displayed just above the input
Namestring?
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.
Placeholderstring?
Gets or sets the short hint displayed in the input before the user enters a value.
ReadOnlybool
False
When true, the control will be immutable by user interaction. readonly HTML attribute for more information.
Requiredbool
False
Gets or sets a value indicating whether the element needs to have a value.
UncheckedMessagestring?
Gets or sets the unchecked message
Valuebool
False
Gets or sets the value of the input. This should be used with two-way binding.
ValueExpressionExpression<Func<bool>>?
Gets or sets an expression that identifies the bound value.

EventCallbacks

Name
Type
Description
ValueChangedEventCallback<bool>
Gets or sets a callback that updates the bound value.

Methods

Name
Parameters
Type
Description
FocusAsyncvoid
Exposes the elements FocusAsync(bool preventScroll) method.
FocusAsyncbool preventScroll
void
Exposes the elements FocusAsync(bool preventScroll) method.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙