Switcher
The switcher input type is used for boolean toggle switches. It provides a modern, accessible way to enable/disable features, accept terms, or make yes/no decisions with a simple on/off state.
Properties
Required Properties
- name (string): Unique identifier for the field
- type (string): Must be 'switcher'
- label (string): Display label for the field
Optional Properties
- disabled (boolean): Whether the field is disabled
- layout (string): Layout type (default, horizontal)
- rules (array): Validation rules for the field
Examples
Basic Switcher
typescript
{
name: 'newsletter',
type: 'switcher',
label: 'Subscribe to newsletter',
rules: []
}Required Switcher
typescript
{
name: 'terms',
type: 'switcher',
label: 'I agree to the terms and conditions',
rules: ['required']
}Complex Form with Multiple Switchers
typescript
const schema = [
{
name: 'newsletter',
type: 'switcher',
label: 'Subscribe to newsletter',
rules: [],
},
{
name: 'terms',
type: 'switcher',
label: 'I agree to the terms and conditions',
rules: ['required'],
},
{
name: 'darkMode',
type: 'switcher',
label: 'Enable dark mode',
rules: [],
},
{
name: 'emailNotifications',
type: 'switcher',
label: 'Email notifications',
rules: [],
},
{
name: 'publicProfile',
type: 'switcher',
label: 'Make profile public',
rules: [],
},
];Best Practices
- Use clear, action-oriented labels that describe what the switch does
- Make required switches obvious when user consent is needed
- Group related switches together for better organization
- Use consistent terminology across your application
- Provide default states that match user expectations
- Consider accessibility with proper labels and descriptions
- Use switches for binary choices rather than complex options
- Provide immediate feedback when switches are toggled