EEnterUI
DocsComponentsThemesDonation
Get Started
      • Checkbox
      • RadioGroup
      • Switch
EnterUIDocsInputsForm ControlsChoice ControlsCheckbox
InputsUpdated 6 May 2026

Checkbox

A compact checkbox with checked, indeterminate, and disabled states.

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

Checkbox states

Checked, indeterminate, and disabled states are intentionally compact.

Code
<div className="docs-preview-stack">
  <label className="docs-preview-option"><Checkbox defaultChecked /> Publish docs</label>
  <label className="docs-preview-option"><Checkbox indeterminate /> Review mixed state</label>
  <label className="docs-preview-option"><Checkbox disabled /> Locked option</label>
</div>

#Import

Code
import { Checkbox } 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.

PreviousURLInput
NextRadioGroup

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling