Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Form Field Switch
A pre-configured Switch wrapper that composes Field, FieldLabel, FieldDescription, and FieldError into a single component. Provides built-in EditForm validation, automatic label association, and consistent form field layout.
Default
A basic
FormFieldSwitch with a label and two-way binding via @bind-Checked. The component automatically generates a unique ID for label-to-switch association.
Loading example…
With Helper Text
Use
HelperText to provide additional context below the switch. The helper text is hidden when the field enters an error state.
Loading example…
Sizes
Use the
Size parameter to control the switch dimensions. Available sizes are Small, Medium (default), and Large.
Loading example…
With Error
Use
ErrorText to manually set a validation error. Click Validate to trigger the error when the switch is off, or toggle it on to clear.
Loading example…
Disabled
Set
Disabled to true to prevent interaction. The switch displays with reduced opacity.
Loading example…
Custom Variant
Use
InputClass to apply custom Tailwind CSS classes to the inner switch and Class to style the outer field container. Override the track and thumb colors with data-[state=checked] selectors to match your brand.
Loading example…
EditForm Validation
Inside an
EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting without enabling two-factor authentication.
Loading example…