Checkbox

View as Markdown

Checkbox component supporting error & warning states, size variants, and standard HTML checkbox attributes.
Show code
Hide code
 
import { Checkbox } from '@mylighthouse/prism-react';

export default function CheckboxDefault(): React.JSX.Element {
  return (
    <div className="flex gap-300 items-center">
      <Checkbox />
      <Checkbox defaultChecked />
    </div>
  );
}

Validation States
Show code
Hide code
 
import { Checkbox } from '@mylighthouse/prism-react';

export default function CheckboxValidation(): React.JSX.Element {
  return (
    <div className="flex gap-300 items-center">
      <Checkbox hasError />
      <Checkbox hasWarning />
    </div>
  );
}

Disabled
Show code
Hide code
 
import { Checkbox } from '@mylighthouse/prism-react';

export default function CheckboxDisabled(): React.JSX.Element {
  return (
    <div className="flex gap-300 items-center">
      <Checkbox disabled />
      <Checkbox defaultChecked disabled />
    </div>
  );
}

API Reference

Name Default Type Description
hasError -- boolean --
hasWarning -- boolean --
indeterminate -- boolean --
isSecondary -- boolean --
isSmall -- boolean --