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.With Helper Text
Use
HelperText to provide additional context below the switch. The helper text is hidden when the field enters an error state.Sizes
Use the
Size parameter to control the switch dimensions. Available sizes are Small, Medium (default), and Large.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.Disabled
Set
Disabled to true to prevent interaction. The switch displays with reduced opacity.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.EditForm Validation
Inside an
EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting without enabling two-factor authentication.