Components

Switch

A setting turned on or off. Use a switch for a setting that saves as it is flipped, outside a form, and a checkbox for a fact a form submits later.

Drawn and behaving as Flux UI's switch does, measured against its live docs.

Switch

In an inline field, bound to a bool and written as it is flipped.

SwitchExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SwitchExample : Component
{
    private bool _notifications;

    protected override Component? Render() =>
        Div.Class("max-w-xs space-y-3")[
            Ui.Field.Variant(Ui.FieldVariant.Inline)[
                Ui.Label["Enable notifications"],
                Ui.Switch.Value(_notifications).OnChange(value => { _notifications = value; }).Id("sw-notify"),
                Ui.Error
            ],
            Ui.Text.Data("testid", "ui-switch-state")[$"Notifications {(_notifications ? "on" : "off")}."]
        ];
}

Live result

Enable notifications

Notifications off.

Fieldset

Related switches in a fieldset, each with its own label and description.

SwitchFieldsetExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SwitchFieldsetExample : Component
{
    private bool _communication = true;
    private bool _marketing;
    private bool _social;
    private bool _security = true;

    protected override Component? Render() =>
        Ui.Fieldset.Class("max-w-md")[
            Ui.Legend["Email notifications"],
            Div.Class("space-y-4")[
                Ui.Switch.Value(_communication).OnChange(on => { _communication = on; }).Label("Communication emails")
                    .Description("Receive emails about your account activity."),
                Ui.Separator.Subtle,
                Ui.Switch.Value(_marketing).OnChange(on => { _marketing = on; }).Label("Marketing emails")
                    .Description("Receive emails about new products, features, and more."),
                Ui.Separator.Subtle,
                Ui.Switch.Value(_social).OnChange(on => { _social = on; }).Label("Social emails")
                    .Description("Receive emails for friend requests, follows, and more."),
                Ui.Separator.Subtle,
                Ui.Switch.Value(_security).OnChange(on => { _security = on; }).Label("Security emails")
                    .Description("Receive emails about your account activity and security.")
            ]
        ];
}

Live result

Email notifications

Communication emails

Receive emails about your account activity.

Marketing emails

Receive emails about new products, features, and more.

Security emails

Receive emails about your account activity and security.

Left align

Left puts the switch before its label, for a more compact column.

SwitchLeftExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SwitchLeftExample : Component
{
    protected override Component? Render() =>
        Ui.Fieldset[
            Ui.Legend["Email notifications"],
            Div.Class("space-y-3")[
                Ui.Switch.Value(false).Label("Communication emails").Left,
                Ui.Switch.Value(false).Label("Marketing emails").Left,
                Ui.Switch.Value(false).Label("Social emails").Left,
                Ui.Switch.Value(false).Label("Security emails").Left
            ]
        ];
}

Live result

Email notifications

Communication emails

Marketing emails

Security emails

Behaviour

A real checkbox

The switch is a <label> around an <input type="checkbox" role="switch"> that is out of sight, never hidden. The thumb's 150 ms travel reads the input's own :checked, so a click on the label, the space bar and the form post (name and value) are the browser's. A native checkbox does not flip on Enter; Flux's switch does, so the runtime flips every role="switch" on Enter as well.

Its value

A switch binds a bool: Bind(() => m.Alerts) writes with the reader's next action and .Live() as it is flipped, which is how a setting that saves itself is written; Value(on).OnChange(v => on = v) leaves it with the page. It sits at the far edge of its row, and Left puts it before its label. Name is what it is posted under, and Attributes forwards anything else to the input.

Reference

`Ui.Switch`

flux:switch

A setting turned on or off: a checkbox with role="switch".

Step	Takes	What it does
`.Bind(…)`	() => a bool	The model's flag it reads and writes: () => m.Alerts. Or Value with OnChange.
`.Value(…)`	`bool`	Whether it is on, for a page that holds it itself.
`.OnChange(…)`	a handler given the new value	Runs with the new state when it is flipped.
`.AfterBind(…)`	a handler given the new value	Runs after Bind has written the model.
`.Validate(…)`	a validator	A rule the value is checked by when it is written.
`.Live()`	`bool`	Writes the model as soon as it is flipped, not with the next action.
`.Label(…)`	`string`	Its words, in a field around it.
`.Description(…)`	`string`	Help text under its label.
`.Align(…)`	`Ui.SwitchAlign` Right Left Each is a step of its own too, unless an HTML tag has its name.	Left puts it before its label. After it when unset.
`.Disabled()`	`bool`	Dims it and takes it out of reach.
`.Name(…)`	`string`	What it is posted under in a form.
`.ShowValidation()`	`bool`	False leaves the member's message to a Ui.Error placed elsewhere.
`.Attributes(…)`	("aria-label", "Search") pairs	Attributes for the <input> itself.