Checkbox

A checkbox component with ASCII-style visual indicators [x] and [ ].

Docs•API Reference

Status: Not accepted

Selected: 1/3

Installation

npm install react-ascii-ui

Usage

import { AsciiCheckbox } from 'react-ascii-ui';

export default function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <AsciiCheckbox 
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
      label="Accept terms and conditions"
    />
  );
}

Examples

Basic Checkbox

<AsciiCheckbox label="I agree to the terms" />

Controlled

<AsciiCheckbox 
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
  label="Controlled checkbox"
/>

Disabled

<AsciiCheckbox disabled label="Disabled unchecked" />
<AsciiCheckbox disabled checked label="Disabled checked" />

API Reference

Props

PropTypeDefaultDescription
labelstring-Optional label text displayed next to checkbox
checkedbooleanfalseWhether the checkbox is checked
onChange(event) => void-Callback fired when the state is changed
disabledbooleanfalseWhether the checkbox is disabled
classNamestring""Additional CSS classes

AsciiCheckbox extends all HTML input attributes (except type) and React.InputHTMLAttributes.