Overview
DeviceToggle provides a compact toggle group for selecting between device preview widths. It's designed to live in PropertyPanel header areas or anywhere device-specific previews are needed, such as email template builders or responsive preview tools.
Key Features
- Three device presets: mobile (375px), tablet (768px), desktop (1024px)
- Configurable device set (show only the devices you need)
- Two size variants (sm and default)
- Full keyboard accessibility with radiogroup semantics
- Helper functions for getting device widths programmatically
When to Use
Use DeviceToggle when you need to let users preview content at different device widths. Common use cases include email template builders, landing page designers, and responsive preview tools. For selecting between device types without preview width implications, consider CardToggle instead.
Interactive Examples
Basic Usage
Selected: desktop — Width: 896px
The default configuration shows all three device options: mobile (375px), tablet (768px), and desktop (1024px).
Size Variants
Custom Device Set
Only mobile and desktop options (tablet hidden)
In PropertyPanel Context
DeviceToggle is designed to work well in PropertyPanel headers for preview width control:
Device Widths Reference
| Device | Width (px) | Typical Use |
|---|---|---|
mobile | 375 | iPhone SE, small phones |
tablet | 768 | iPad portrait, tablets |
desktop | 896 | Laptops, desktops |
Module Exports
This module exports the component, type, and helper utilities:
| Export | Type | Description |
|---|---|---|
DeviceToggle | Component | Main toggle component |
DeviceType | Type | Union type: "mobile" | "tablet" | "desktop" |
getDeviceWidth | Function | Returns pixel width for device type |
DEVICE_WIDTHS | Object | Constant mapping device types to widths |
import {
DeviceToggle,
getDeviceWidth,
DEVICE_WIDTHS,
type DeviceType,
type DeviceToggleProps,
} from '@/ui/components';Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | DeviceType | required | Currently selected device ("mobile" | "tablet" | "desktop") |
onChange | (device: DeviceType) => void | required | Callback when device selection changes |
devices | DeviceType[] | ['mobile', 'tablet', 'desktop'] | Which devices to show (subset of all three) |
size | 'sm' | 'default' | 'default' | Size variant (sm for compact contexts) |
className | string | - | Additional CSS classes for the container |
Usage
import { DeviceToggle, getDeviceWidth, DEVICE_WIDTHS, type DeviceType } from '@/ui/components';
// Basic usage with state
const [device, setDevice] = useState<DeviceType>('desktop');
<DeviceToggle
value={device}
onChange={setDevice}
/>
// With size variant
<DeviceToggle
value={device}
onChange={setDevice}
size="sm"
/>
// Custom device set (mobile + desktop only)
<DeviceToggle
value={device}
onChange={setDevice}
devices={['mobile', 'desktop']}
/>
// Getting device width for preview
const width = getDeviceWidth(device); // 375, 768, or 1024
// Using width constants directly
const mobileWidth = DEVICE_WIDTHS.mobile; // 375