Switch

Toggle switch with optional label and helper text. Integrates with DashForm automatically — value is stored as a boolean, identical to Checkbox but with a different visual control.

Form-connected checkbox input built on top of Material-UI. Switch integrates automatically with DashForm and the Dashforge form engine. Registration, validation, error handling, reactive visibility, and RBAC orchestration are handled internally by the component. The component is designed for form-driven workflows rather than standalone state orchestration. The name prop is required to connect the field to the form schema and the internal form engine.

Quick Start

<Switch
  name="notifications"
  label="Enable email notifications"
  defaultChecked
/>

Examples

A switch bound to the form by name. The form stores a boolean.

<Switch name="notifications" label="Enable notifications" />

defaultChecked sets the initial value.

<Switch name="darkMode" label="Dark mode" defaultChecked />

Error state with helper text.

<Switch name="agree" label="I agree" error helperText="This field is required" />

API

Notes

• The stored form value is a boolean (true = on, false = off).
• Switch and Checkbox are interchangeable at the data level; choose based on UI context.

Capabilities

Switch supports progressive adoption — use it as a standalone controlled input, integrate with React Hook Form, or conditionally show it based on other form state.

Controlled

Available Now

Switch works as a standard React controlled component with familiar patterns. No proprietary lock-in required.

• Standard checked and onChange props
• No proprietary lock-in
• Easy incremental adoption

<Switch
  checked={isEnabled}
  onChange={(e) => setIsEnabled(e.target.checked)}
  label="Enable notifications"
/>

React Hook Form Ready

Integration-Friendly

Designed to integrate with React Hook Form workflows through DashForm. Compatible with existing form-library patterns.

• Works through DashForm bridge
• Validation and error handling supported
• Fits existing RHF workflows

<DashForm>
  <Switch
    name="notifications"
    label="Email notifications"
    rules={{ required: 'Please enable or disable' }}
  />
</DashForm>

Reactive Visibility

Switch can participate in engine-driven visibility rules through visibleWhen. Use it when a toggle depends on other form state.

• Conditional rendering via visibleWhen
• Engine evaluates the predicate
• Useful for dependent settings

<Switch
  name="marketingEmails"
  label="Send marketing emails"
  visibleWhen={(engine) =>
    engine.getNode('emailsEnabled')?.value === true
  }
/>

RBAC Access Control

Declarative role-based access control via the access prop. The component calls useAccessState(access) internally and maps the resolved permission to one of three field states — no if statements or manual checks needed in the parent.

The access prop accepts an AccessRequirement object: