Keyboard Shortcuts

Learn how to enhance your checkbox interactions with keyboard shortcuts.

Example

Usage

Basic Shortcut

<Checkbox shortcut="ctrl+s">
  Save Settings
</Checkbox>

With Custom Handler

<Checkbox 
  shortcut="alt+a"
  onShortcut={() => {
    console.log('Shortcut triggered');
    // Additional actions
  }}
>
  Select All
</Checkbox>

Multiple Modifiers

<Checkbox shortcut="ctrl+shift+a">
  Advanced Selection
</Checkbox>

Supported Keys

The shortcut prop supports various key combinations:

1. Modifier Keys:

   • ctrl
   • alt
   • shift

2. Regular Keys:

   • Letters (a-z)
   • Numbers (0-9)
   • Special keys (space, enter, etc.)

Format

Shortcuts should be specified in the following format:

• Single key: "a"
• With modifier: "ctrl+a"
• Multiple modifiers: "ctrl+shift+a"

Best Practices

1. Accessibility:

   • Avoid conflicts with browser shortcuts
   • Provide visual indication of shortcuts
   • Consider platform differences

2. User Experience:

   • Use intuitive combinations
   • Keep shortcuts consistent
   • Document shortcuts clearly

3. Implementation:

   • Handle edge cases
   • Prevent default when needed
   • Consider focus management

4. Common Patterns:

   • Use ctrl/cmd for main actions
   • Use alt for alternative actions
   • Use shift for modified behavior