- bit BlazorUI
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming
  • Toggle

    A toggle represents a physical switch that allows someone to choose between two mutually exclusive options. For example, “On/Off”, “Show/Hide”. Choosing an option should produce an immediate result.

    Usage

    Basic

    Texts
    Customize BitToggle On and Off texts, providing more context for its state.



    Label
    Use inline labels and custom label templates in BitToggle.


    Inline:





    LabelTemplate:

    Reversed
    Reverse the label and input position of BitToggle.


    Default:





    Inline:

    FullWidth
    Full width BitToggle in Inline mode.


    Default:





    Reversed:



    Binding
    Bind value one-way and two-way in BitToggle







    Style & Class
    Customize the appearance of BitToggle using styles and CSS classes.


    Validation
    Use BitToggle within a form and validate its state.


    RTL
    Use BitToggle in right-to-left (RTL).







    API

    BitToggle parameters
    Name
    Type
    Default value
    Description
    Classes BitToggleClassStyles? null Custom CSS classes for different parts of the toggle.
    DefaultValue bool? null The default value of the toggle when the value parameter has not been assigned.
    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.
    Label string? null Label of the toggle.
    LabelTemplate RenderFragment? null Custom label of the toggle.
    OffText string? null Text to display when toggle is OFF.
    OnText string? null Text to display when toggle is ON.
    Role string switch Denotes role of the toggle, default is switch.
    Styles BitToggleClassStyles? null Custom CSS styles for different parts of the toggle.
    Text string? null Default text used when the On or Off texts are null.
    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.
    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.
    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 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.
    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.
    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.
    Thumb string? null Custom CSS classes/styles for the thumb of the BitToggle.
    Text string? null Custom CSS classes/styles for the text of the BitToggle.
    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.
    • On this page