Switch

A control that allows the user to toggle between checked and not checked states.

Basic Example

A simple switch component with an associated label.

Source

<EditForm Model="@_model">
    <div class="flex items-center space-x-2">
        <RzSwitch For="@(() => _model.AirplaneMode)" Id="airplane-mode" />
        <Label for="airplane-mode">Airplane Mode</Label>
    </div>
</EditForm>

Usage in a Field

For better form structure and accessibility, compose the `RzSwitch` within a `Field` component. Use `Orientation="FieldOrientation.Horizontal"` to layout the elements in a row.

Source

<EditForm Model="@_model">
    <Field Orientation="FieldOrientation.Horizontal" class="justify-between rounded-lg border p-4">
        <div class="space-y-0.5">
            <FieldLabel For="@(() => _model.MarketingEmails)">Marketing emails</FieldLabel>
            <FieldDescription>
                Receive emails about new products, features, and more.
            </FieldDescription>
        </div>
        <RzSwitch For="@(() => _model.MarketingEmails)" />
    </Field>
</EditForm>

Component Parameters

Property	Type	Default	Description
`For`	`Expression<Func<bool>>`	Required	An expression that identifies the bound boolean value.
`Value`	`bool?`	`null`	The current value of the switch.
`DisplayName`	`string?`	`null`	The display name for the input, used for validation messages and labels if not otherwise specified.
`AriaLabel`	`string?`	"Toggle switch"	The accessible label for the switch, announced by screen readers.