Checkbox

Checkbox defines how EnterUI handles a compact checkbox with checked, indeterminate, and disabled states, including default structure, accessible states, and token-driven styling.

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <HStack gap={8}><Checkbox id="checkbox-option-1" defaultChecked /><Label htmlFor="checkbox-option-1">Publish docs</Label></HStack>
  <HStack gap={8}><Checkbox id="checkbox-option-2" indeterminate /><Label htmlFor="checkbox-option-2">Review mixed state</Label></HStack>
  <HStack gap={8}><Checkbox id="checkbox-option-3" disabled /><Label htmlFor="checkbox-option-3">Locked option</Label></HStack>
</VStack>

#Import

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

#Accessibility

Checkbox renders a visually hidden native input type="checkbox". The indeterminate prop sets the DOM indeterminate state and aria-checked="mixed".

#API

• indeterminate enables mixed state.
• Supports native checkbox props such as checked, defaultChecked, disabled, and name.

#Styling

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