Inputs
Toggle
Bit.BlazorUISwitch
BitToggle is a physical switch turned into a control: flip it to choose between two mutually exclusive options - “On/Off”, “Show/Hide” - and the choice takes effect right away, with no Save button in between. That immediacy is what separates it from a checkbox, which states an intention a later submit carries out, so a switch inside a form that ends in a Submit button is the one place not to use it. It is built on a real focusable button carrying the switch role: Tab reaches it, Space and Enter flip it, and screen readers announce it as a switch with its state. The knob carries that state by position as much as by color, and its slide collapses to a jump wherever reduced motion is asked for. Beyond the two plain states it can name each of them with a state text, carry content inside its track or its knob, explain itself in a description line, say why a state was rejected in an error line, show a spinner while a change is still in flight, refuse a change before it lands, be flipped from code, and place its label on any side. A BitParams ancestor sets the defaults of every toggle in a subtree, and a tier of public --bit-Toggle-* CSS variables restyles the default geometry, palette and motion, which an explicit Color or Size still wins over.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
A click anywhere on the BitToggle - the track, its label or its state text - flips it, and the knob
slides to the other end of the track to say so. Left unbound like the first one below, it keeps its own
state with no binding or event handler involved, and DefaultValue only picks where that state
starts. Disabling it greys it out and takes it out of the tab order and the interaction entirely; the
disabled state renders both on and off.
Texts
A state text sits next to the knob and says in words what the knob says in position.
OnText and OffText give each state its own wording, while Text is the single
fallback used whenever the text for the current state is missing - so setting only Text labels
both states the same way, and setting only OnText leaves the off state showing Text or
nothing at all.
Track content
OnContent and OffContent put arbitrary markup inside the track, on the side the knob
has just left - the compact "I/O", "ON/OFF" or ✓/✗ pattern for where there is no room for a state text
beside the toggle. The track widens to fit instead of letting it overflow, and the content is hidden from
screen readers, which already learn the state from the switch. Both sides are stacked in the same cell, so
the track is as wide as the wider of the two and keeps that width through a flip - the third toggle below,
which only has an off side, does not shrink when it is turned on.
Knob content
OnIconName and OffIconName draw a glyph inside the knob itself, the way a native
platform switch marks its two states; ThumbTemplate puts arbitrary markup there instead and
receives the current state. Either way the whole toggle steps up to a roomier geometry - and stays
there in both states, so flipping it never resizes it under the pointer - and the knob stays hidden
from screen readers, which take the state from the switch. While the toggle is
loading the spinner takes the knob back from both. The
External Icons section shows the BitIconInfo
counterparts of the two icon parameters.
ThumbTemplate:
Label & layout
LabelPlacement puts the label on any of the four sides of the knob and follows the reading
direction, so Start is the left in LTR and the right in RTL.
Inline and Reversed reach the same four shapes with flags instead: Inline puts
the label and the knob on one line - the usual shape of a settings row - and Reversed flips
whichever of the two stacks is in use. An explicit LabelPlacement wins over both.
FullWidth stretches the BitToggle across its container and pushes the label and the knob to
opposite edges - the layout of a settings list, where every row lines its switches up on the same
side. It shapes the single-line layouts, so it is paired with Inline below.
LabelTemplate replaces the plain string with arbitrary markup - a formatted phrase, an icon,
a link to what is being switched on - while it stays part of the click target and keeps naming the
switch for screen readers.
Loading
A switch promises an immediate result, which is a promise a round trip to a server cannot always keep.
Loading covers that gap: the knob turns into a spinner, the toggle keeps its current state and
stops accepting clicks, and it is announced as busy and unavailable - so the change in flight is never
flipped a second time while it is still being saved. The toggle below stays busy for a second before its
new state lands.
Saved state: False
AutoLoading reaches the same result without a flag of its own: the BitToggle raises and clears the
busy state itself around its awaited callbacks - OnClick, OnChanging and OnChange -
so the spinner covers exactly as long as the work behind the change takes. The toggle below saves for a
second with no isSaving field anywhere.
The spinner takes over the knob from whatever it was carrying - a glyph, a
template, nothing at all - and is drawn to the size of whichever
knob it lands in, so turning a toggle busy never resizes it in front of the person waiting on it:
Read-only & Required
ReadOnly keeps the BitToggle focusable and lets screen readers announce it and its state, but
clicking or pressing Space no longer changes it - unlike disabling, which takes it out of the interaction
altogether. The value can still change from code:
Required marks the label with an asterisk and tells assistive technologies the choice has to be
made. Because a switch is always in one of its two states, the rule that makes one of them wrong belongs
to the model - see the Validation section - rather than to the
browser's own required check.
Binding
Value comes in the usual binding shapes. Passed one-way, the parameter dictates the state: the
BitToggle renders whatever the expression says and a click cannot move it away from a fixed value. Bound
two-way with @bind-Value, changes flow in both directions - flipping the toggle updates the field,
and updating the field from elsewhere (the toggle buttons below) flips the toggle.
One-way (fixed):
One-way:
Two-way:
The ToggleAsync method changes the state from code through the very path a click takes, so
OnChanging still gets its veto and OnChange still reports the result - which is what
separates it from writing to the bound field directly. Its overload takes the state to move to
instead of flipping the current one, and does nothing when the toggle is already in it. Neither the
read-only nor the loading state stops it: those close the toggle to the user, not to the code behind
it - only disabling it closes both.
Nothing changed yet.
Events
Three callbacks fire in a fixed order around a click: OnClick first, while the state is still the
old one; then OnChanging, carrying the state the BitToggle is about to move to; and finally
OnChange, once the new state is committed. The toggle below has all three wired to a log - flip it
and watch the order:
No clicks yet.
OnChanging is the veto point: setting Cancel on its arguments leaves the BitToggle where it
was, so a change can be refused instead of being reverted after the fact. It is awaited, so it can take
its time - asking for confirmation, or checking with the server before letting the state through. While it
is taking that time the BitToggle stops accepting clicks, so a second click cannot start a change that
races the one still being decided; use Loading alongside it when the
wait is long enough to be worth showing.
Cancelled attempts: 0
A BitToggle inside a clickable container fires that container's handler too. StopPropagation keeps
the clicks to itself. Both toggles below sit in the same clickable box:
Container clicks: 0
Focus is reported as well: OnFocus and OnBlur fire as the switch gains and loses the focus,
and OnFocusIn and OnFocusOut are their bubbling counterparts - the pair to reach for when
the toggle sits inside a container that tracks whether the focus is anywhere within it. Tab into the
toggle below and back out again:
Not focused yet.
Description
Description adds the second line of a settings row: the sentence that says what turning the switch
on actually does, where the label only names it. It takes a line of its own under the whole BitToggle in
every layout, and screen readers announce it after the name of the switch. In the single-line shapes a
described BitToggle spans its container - the layout a settings row wants anyway - while stacked it keeps
hugging its content. DescriptionTemplate puts arbitrary markup there instead. Where the explanation
should only be announced and never shown, use
AriaDescription instead.
The subscription is renewed one day before it expires.
Inline and FullWidth, the usual shape of a settings list:
Keep a copy of the last synced data on this device.
Send anonymous usage data to help us prioritize what to build next.
DescriptionTemplate:
Turning this on opts you into features that are still changing.
Learn more(opens in a new tab)
Validation
Inside an EditForm, the BitToggle takes part in validation like any other input: bind it to a model
property, let data annotations state the rule - here, that the terms must be agreed to - and a failed
submit shows the message. While invalid, the BitToggle also switches to its error styling and reports
aria-invalid on the switch, so the failure is both visible and announced right at the control.
For a plain HTML post rather than an EditForm, Name names the hidden checkbox that carries
the state into the form data - it submits true while the toggle is on and is left out of the post
entirely while it is off, exactly as a native checkbox would.
Not every rejection comes from an EditForm. Invalid forces the error styling and
aria-invalid on a state something else refused - a server, a rule spanning two controls -
and ErrorMessage adds the line that says why, on its own line under the toggle and above
any description. A message implies Invalid, so the
flag on its own is for marking a toggle whose explanation lives somewhere else. It is announced
by a live region the moment it appears, rather than waiting for the next focus.
ErrorMessageTemplate puts arbitrary markup there instead; set the plain message alongside
it to keep the announcement.
Your organization requires two-factor authentication.
Ask for a code from your authenticator app at every sign-in.
Your organization requires two-factor authentication.
This conflicts with your
privacy settings(opens in a new tab).
Accessibility
The BitToggle is a real focusable button carrying the switch role: Tab moves the focus to it and
draws a focus ring, Space and Enter flip it, and screen readers announce it as a switch that is on or off.
Its pointer target is never smaller than 24 by 24 CSS pixels, whatever size the track is drawn at, and the
label and the state text are part of that target as well. AutoFocus puts the initial focus on it
when the page renders, and Title fills the native tooltip, which answers a hover anywhere on the
toggle rather than on the knob alone.
Role is the escape hatch for the rare case where the switch semantics are wrong - setting it to
checkbox makes the control announce itself as checked or unchecked instead of on or off, for a
choice that only takes effect on a later submit.
The FocusAsync method moves the focus programmatically:
A BitToggle without a visible label needs an AriaLabel to have an accessible name, and
AriaDescription adds a visually hidden description that screen readers read after the name -
the announced-only counterpart of the visible Description.
The subscription will be renewed one day before it expires.
When the name of the switch is already written somewhere on the page - a section heading, a table
column, the caption of the row it sits in - AriaLabelledby points at that element by its id
instead of repeating its words inside the toggle. It outranks every other source of the name,
including the toggle's own label and AriaLabel. Its counterpart AriaDescribedby does the
same for an explanation already on the page, except that it is added to what the toggle already
describes itself with - its state text and its AriaDescription - instead of replacing them.
Offline mode
Keep a copy of the last synced data on this device.
When flipping the switch governs another part of the page, AriaControls names that part by its id,
so assistive technologies can tie the switch to what it acts on instead of leaving the two unrelated:
The name of a switch must not change along with its state, or it renames itself on every flip
instead of naming itself. So the name comes from the label, and a state text that differs between
the two states - OnText and OffText - is announced as a description after it rather
than folded into it; the on/off state itself is already carried by the switch. Only a state text
that says the same thing in both states, like a lone Text, can name a toggle that has no
label of its own:
A disabled BitToggle leaves the tab order, so keyboard and assistive-technology users can no longer
reach it, while its Title still shows on hover, since the tooltip sits on the root.
AllowDisabledFocus keeps it focusable instead, reporting the state through
aria-disabled rather than the native attribute, while still refusing every change. Tab through
the two below:
Cascading parameters
BitParams carries a BitToggleParams down to every BitToggle under it, so a settings
panel, a dialog or a whole page picks the layout and the on/off wording - or the size and the color the
sections below introduce - once
instead of on every switch in it. What it carries is a default and not an override: a toggle that
sets a parameter for itself keeps its own value, and only what it left unset is filled in - which is
what lets the one row that needs to stand out step out of the cascade without the panel having to know
about it. Every value parameter the BitToggle declares itself is on the params object, alongside the shared
ones every component has; the templates, the callbacks, the value binding and the inherited input
parameters - ReadOnly, Required, Name - are not.
Keep a copy of the last synced data on this device.
Color
Color picks the theme color the track fills with once the BitToggle is on, with Primary as
the default; the off track stays neutral whichever color is picked, so it keeps reading as "off". The
semantic colors - Success, Warning, Error and friends - tie the toggle to what
switching it on means, while the Background, Foreground and Border families keep it
legible on non-default surfaces like the inverted panel below.
Off:
External Icons
The knob icons are not limited to the built-in icon font: OnIcon and OffIcon take a
BitIconInfo - or a raw CSS class string - that can point at any icon library whose stylesheet is
loaded, like FontAwesome or Bootstrap Icons below. Use BitIconInfo.Fa(), BitIconInfo.Bi()
or BitIconInfo.Css() to build one.
FontAwesome:
Bootstrap Icons:
Size
Size scales the track, the knob, the label and the state text together: Small for dense
lists and table rows, Medium (the default) for forms, and Large where the BitToggle is a
primary control or aimed at touch. A toggle carrying knob icons steps every size up to a roomier track
that fits them, keeping the three sizes in proportion.
Small:
Medium:
Large:
Style & Class
The BitToggle can be restyled from the outside at three levels of reach. Style and Class
apply to the root element, while Styles and Classes reach every part of it by name - the
root, the label, the description, the error line and the message inside it, the container, the button
(which is the track), the track content and each of its two sides on its own, the thumb, its icon, the
spinner and the state text - plus a Checked slot that is applied only while the toggle is on,
which is what lets the two states be painted differently without a single line of state-tracking code.
Component's style & class:
Styles & Classes:
The BitToggle also reads a set of CSS variables off its
root. They inherit, so a value on
:root or on any ancestor re-skins every toggle below it, and
one on the Style of an instance re-skins that one and any toggle nested in it. They restyle the
default, not a choice: an explicit Color or Size wins over the variables for what it sets. The
geometry ones belong on the root - the knob and the lane held open for it are measured there - which is what
the Root slot above and the Style parameter below both are.
Set once on an ancestor, inherited by every toggle inside it:
RTL
Set Dir to BitDir.Rtl to render the BitToggle right-to-left. The knob then travels the other
way - resting on the right when off and sliding to the left when on - and every side-aware layout follows
it, so the track content, the label position and the reversed layouts all mirror without any extra markup.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitToggle CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Toggle-track-background | $clr-bg-pri | Track fill while the toggle is off. |
| --bit-Toggle-track-border-color | $clr-brd-pri | Track stroke while the toggle is off. |
| --bit-Toggle-thumb-color | $clr-fg-sec | The knob while the toggle is off. |
| --bit-Toggle-hover-track-background | As the track fill at rest | Track fill while hovered and off (pointer devices only). |
| --bit-Toggle-hover-track-border-color | $clr-brd-pri-hover | Track stroke while hovered and off (pointer devices only). |
| --bit-Toggle-hover-thumb-color | $clr-fg-sec-hover | The knob while hovered and off (pointer devices only). |
| --bit-Toggle-checked-background | $clr-pri | Track fill while the toggle is on. The Color parameter wins over it. |
| --bit-Toggle-checked-border-color | transparent | Track stroke while the toggle is on. |
| --bit-Toggle-checked-thumb-color | $clr-pri-text | The knob while the toggle is on, hover included. The Color parameter wins over it. |
| --bit-Toggle-checked-hover-background | $clr-pri-hover | Track fill while hovered and on (pointer devices only). The Color parameter wins over it. |
| --bit-Toggle-icon-color | The track fill behind the knob | The glyph inside the knob, in both states - drawn in the color of the track, so it reads as cut out of the knob. |
| --bit-Toggle-spinner-color | As the glyph it replaces | The moving arc of the loading spinner; the ring it travels on is the same color at 30%. |
| --bit-Toggle-content-color | $clr-fg-sec while off, $clr-pri-text while on | The OnContent and OffContent carried inside the track. The Color parameter wins over it while on. |
| --bit-Toggle-label-color | $clr-fg-pri | The label beside the knob. |
| --bit-Toggle-text-color | inherit | The state text beside the knob. |
| --bit-Toggle-description-color | $clr-fg-sec | The description line under the toggle. |
| --bit-Toggle-disabled-color | $clr-bg-dis / $clr-brd-dis / $clr-fg-dis | Track fill, track stroke and knob when disabled. |
| --bit-Toggle-disabled-text-color | $clr-fg-dis | Label, state text, description and track content when disabled, and the focus ring of a disabled toggle that AllowDisabledFocus keeps in the tab order. |
| --bit-Toggle-error-color | $clr-err | Track stroke, checked fill, state text, error message and focus ring while the state is invalid. |
| --bit-Toggle-required-color | $clr-req | The asterisk of a required toggle. |
| --bit-Toggle-focus-color | $clr-pri-focus | Focus ring color. The Color parameter wins over it. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too. |
| --bit-Toggle-track-width | $siz-switch-w-md | Smallest width of the track; a track carrying content still grows to fit it. Stepped up to the roomier icon geometry when the knob holds a glyph, unless this variable names a width of its own. Set it on the root, not on the track. The Size parameter wins over it. |
| --bit-Toggle-track-height | $siz-switch-h-md | Height of the track. Stepped up when the knob holds a glyph, unless set. Set it on the root, not on the track. The Size parameter wins over it. |
| --bit-Toggle-track-radius | Half the track height | Corner radius of the track and of its focus ring; the default draws a pill. |
| --bit-Toggle-border-width | $shp-border-width | Thickness of the track stroke. |
| --bit-Toggle-thumb-size | $siz-switch-thumb-md | Diameter of the knob. Stepped up when it holds a glyph, unless set. Set it on the root, not on the track. The Size parameter wins over it. |
| --bit-Toggle-thumb-radius | 50% | Corner radius of the knob; the default draws a circle. |
| --bit-Toggle-thumb-inset | Derived from the track height and the knob | Room between the knob and the stroke, on every side of it. A negative value lets the knob overhang the track. |
| --bit-Toggle-thumb-shadow | none | Elevation of the knob. |
| --bit-Toggle-thumb-active-scale | 0.9 | How far the knob dips while pressed. Set it to 1 to drop the dip. |
| --bit-Toggle-icon-size | 3/5 of the knob it sits in | The glyph inside the knob. |
| --bit-Toggle-spinner-size | 4/5 of the knob it lands in | Diameter of the loading spinner. |
| --bit-Toggle-spinner-width | $siz-spinner-stroke | Thickness of the ring the spinner is drawn on. |
| --bit-Toggle-gap | spacing(1) | Room between the parts of the toggle: the track and the label, the track and the state text, and the toggle and the lines under it. |
| --bit-Toggle-content-padding | spacing(0.375) | Inset of the track content from the ends of the track. The Size parameter wins over it. |
| --bit-Toggle-label-font-size | $tg-fs-sm | The label. The Size parameter wins over it. |
| --bit-Toggle-label-font-weight | $tg-field-label-font-weight | The label. |
| --bit-Toggle-text-font-size | inherit | The state text. The Size parameter wins over it. |
| --bit-Toggle-description-font-size | $tg-fs-xs | The description line. The Size parameter wins over it. |
| --bit-Toggle-error-font-size | $tg-fs-xs | The error message line. The Size parameter wins over it. |
| --bit-Toggle-content-font-size | $tg-fs-xs | The content carried inside the track. The Size parameter wins over it. |
| --bit-Toggle-transition-duration | $mot-duration-short | How long the knob takes to cross the track, and every color with it. Reduced motion collapses it - the default and a value set here alike - unless ForceAnimation is set. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitToggle parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AllowDisabledFocus | bool | false | Keeps a disabled toggle focusable and discoverable by assistive technologies, conveying the disabled state through aria-disabled rather than the native disabled attribute. The toggle still refuses every change. |
| AriaControls | string? | null | The id of the element the toggle controls, rendered as aria-controls on the switch. |
| AriaDescription | string? | null | Detailed description of the toggle for the benefit of screen readers, rendered as a visually hidden element that the switch points to via aria-describedby. |
| AriaDescribedby | string? | null | The id of an existing element that describes the toggle, added to the aria-describedby of the switch alongside its state text and its AriaDescription rather than replacing them. |
| AriaLabelledby | string? | null | The id of an existing element that labels the toggle, rendered as aria-labelledby on the switch. Takes precedence over the label of the toggle and over AriaLabel. |
| AutoFocus | bool | false | If true, the toggle automatically receives focus when the page renders (rendered as the autofocus attribute). |
| AutoLoading | bool | false | Turns the toggle busy on its own for as long as the awaited OnClick, OnChanging and OnChange callbacks behind a change are still running, without a loading flag having to be tracked outside the component. |
| Classes | BitToggleClassStyles? | null | Custom CSS classes for different parts of the toggle. |
| Color | BitColor? | null | The general color of the toggle, applied to the track of the checked state. An explicit value wins over the --bit-Toggle-* color variables of the checked state and the focus color; left unset, the toggle is primary unless they say otherwise. |
| Description | string? | null | A visible explanation of what the toggle switches, rendered on a line of its own under it and announced after the name of the switch through aria-describedby. |
| DescriptionTemplate | RenderFragment? | null | Custom description of the toggle, replacing Description with arbitrary markup. |
| ErrorMessage | string? | null | A line under the toggle saying why its state was rejected, which marks it invalid in the same way Invalid does and is announced by a live region the moment it shows up. |
| ErrorMessageTemplate | RenderFragment? | null | Custom content of the error message, replacing the plain ErrorMessage text and marking the toggle invalid in the same way. Only the plain ErrorMessage is announced. |
| FullWidth | bool | false | Renders the toggle in full width of its container while putting space between the label and the knob. |
| Inline | bool | false | Renders the label and the knob in a single line together. |
| Invalid | bool | false | Marks the state of the toggle as invalid, giving a state rejected by something other than the cascading EditContext the same look and the same aria-invalid attribute a failing data annotation gives it. |
| Label | string? | null | Label of the toggle. |
| LabelPlacement | BitPlacement? | null | The position of the label in regards to the knob of the toggle. Takes precedence over Inline and Reversed when set. Only Top, Bottom, Start and End are honoured; any other value leaves the layout as it is with this unset. |
| LabelTemplate | RenderFragment? | null | Custom label of the toggle. |
| Loading | bool | false | Renders a spinner in place of whatever the knob carries and suspends the toggle until the pending work behind the change is done. |
| OffContent | RenderFragment? | null | Content rendered inside the track of the toggle while it is OFF, next to the knob. |
| OffIcon | BitIconInfo? | null | The icon rendered inside the knob while the toggle is OFF, using custom CSS classes for external icon libraries. Takes precedence over OffIconName when both are set. |
| OffIconName | string? | null | The name of the built-in icon rendered inside the knob while the toggle is OFF. |
| OffText | string? | null | Text to display when toggle is OFF. |
| OnBlur | EventCallback<FocusEventArgs> | Callback for when the toggle loses focus. | |
| OnChanging | EventCallback<BitToggleChangeArgs> | Callback invoked before the state of the toggle changes, letting the change be cancelled by setting Cancel on the provided arguments. | |
| OnClick | EventCallback<MouseEventArgs> | Callback for when the toggle is clicked, invoked before the state changes. | |
| OnContent | RenderFragment? | null | Content rendered inside the track of the toggle while it is ON, next to the knob. |
| OnFocus | EventCallback<FocusEventArgs> | Callback for when the toggle receives focus. | |
| OnFocusIn | EventCallback<FocusEventArgs> | Callback for when focus moves into the toggle. | |
| OnFocusOut | EventCallback<FocusEventArgs> | Callback for when focus moves out of the toggle. | |
| OnIcon | BitIconInfo? | null | The icon rendered inside the knob while the toggle is ON, using custom CSS classes for external icon libraries. Takes precedence over OnIconName when both are set. |
| OnIconName | string? | null | The name of the built-in icon rendered inside the knob while the toggle is ON. |
| OnText | string? | null | Text to display when toggle is ON. |
| Reversed | bool | false | Reverses the positions of the label and input of the toggle. |
| Role | string? | switch | Denotes role of the toggle, default is switch. |
| Size | BitSize? | null | The size of the toggle. An explicit value wins over the --bit-Toggle-* size variables (track width and height, knob size, content padding, font sizes); left unset, the toggle is medium unless they say otherwise. |
| StopPropagation | bool | false | If true, stops the click event from bubbling up to the parent elements. |
| Styles | BitToggleClassStyles? | null | Custom CSS styles for different parts of the toggle. |
| Text | string? | null | The default text used when the On or Off texts are null. |
| ThumbTemplate | RenderFragment<bool>? | null | Arbitrary content rendered inside the knob, receiving the current state of the toggle, in place of the glyph OnIconName and OffIconName would have drawn there. The knob takes the roomier geometry a glyph asks for, and the spinner still takes it back while the toggle is busy. |
| Title | string? | null | The native tooltip of the toggle, rendered on its root so a hover anywhere on it - the label included - brings the tooltip up. |
BitToggle public members
| Name | Type | Default value | Description |
|---|---|---|---|
| InputElement | ElementReference | The ElementReference of the switch button of the BitToggle - the element that holds the tab stop, not the hidden checkbox that carries the value into a form. | |
| FocusAsync | (bool preventScroll = false) => ValueTask | Gives focus to the switch button of the BitToggle. Pass true to keep the browser from scrolling the toggle into view along the way. | |
| ToggleAsync | () => Task | Flips the state of the BitToggle from code, as a click would: OnChanging still gets to cancel the change and OnChange still reports it. Unlike a click it is not blocked by the read-only or loading states, which only close the toggle to the user; a disabled toggle changes through neither. | |
| ToggleAsync | (bool value) => Task | Moves the BitToggle to a specific state from code, doing nothing when it is already in it. Otherwise identical to the parameterless overload. |
BitInputBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| DefaultValue | TValue? | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| 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. |
| NoValidate | bool | false | Disables the validation of the input. |
| 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 | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitToggleClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitToggle. |
| Label | string? | null | Custom CSS classes/styles for the label of the BitToggle. |
| Description | string? | null | Custom CSS classes/styles for the description of the BitToggle. |
| ErrorMessageContainer | string? | null | Custom CSS classes/styles for the line carrying the error message of the BitToggle. |
| ErrorMessage | string? | null | Custom CSS classes/styles for the error message of the BitToggle. Ignored when an ErrorMessageTemplate replaces the plain message. |
| Container | string? | null | Custom CSS classes/styles for the container of the BitToggle. |
| Button | string? | null | Custom CSS classes/styles for the button of the BitToggle. |
| Checked | string? | null | Custom CSS classes/styles for the checked state of the BitToggle. |
| Content | string? | null | Custom CSS classes/styles for the content rendered inside the track of the BitToggle. |
| OnContent | string? | null | Custom CSS classes/styles for the ON side of the content rendered inside the track of the BitToggle. |
| OffContent | string? | null | Custom CSS classes/styles for the OFF side of the content rendered inside the track of the BitToggle. |
| Thumb | string? | null | Custom CSS classes/styles for the thumb of the BitToggle. |
| Icon | string? | null | Custom CSS classes/styles for the icon rendered inside the thumb of the BitToggle. |
| Spinner | string? | null | Custom CSS classes/styles for the loading spinner of the BitToggle. |
| Text | string? | null | Custom CSS classes/styles for the text of the BitToggle. |
BitToggleChangeArgs properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Value | bool | false | The state the toggle is about to move to (read-only). |
| Cancel | bool | false | Set to true to cancel the change and keep the current state of the toggle. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
BitPlacement enum
| Name | Value | Description |
|---|---|---|
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
BitSize enum
| Name | Value | Description |
|---|---|---|
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
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. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.