Switch

Switch defines how EnterUI handles a tactile boolean control for product settings, including default structure, accessible states, and token-driven styling.

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <HStack gap={8}><Switch id="switch-option-1" defaultChecked /><Label htmlFor="switch-option-1">Enable refined defaults</Label></HStack>
  <HStack gap={8}><Switch id="switch-option-2" /><Label htmlFor="switch-option-2">Show experimental UI</Label></HStack>
  <HStack gap={8}><Switch id="switch-option-3" disabled /><Label htmlFor="switch-option-3">Locked setting</Label></HStack>
</VStack>

#Import

import { HStack, Label, Switch, VStack } from "@froggdesign/enter-ui-react";

#Accessibility

Switch renders a native checkbox input with role="switch". Provide visible label text or aria-label.

#API

• Supports native checkbox props except type.
• Can be controlled with checked or uncontrolled with defaultChecked.
• Supports disabled state.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.