CheckboxUncontrolled

Usage

Before using this component, first consider using the Checkbox component; as the uncontrolled version is for more specific use-cases and generally won’t be used.

To create an uncontrolled checkbox, import <UncontrolledCheckbox>. You’ll need to use it within an html form or pass a ref to be able to use the component’s checked value. Checkboxes can be true or false.

import { UncontrolledCheckbox } from "stylus-ui/Checkbox";

export default () => {
  return <UncontrolledCheckbox name='uncontrolled-checkbox' />;
};

Label

An accessible label can be displayed alongside a checkbox by passing a label. Make sure you pass either id or name so the label’s htmlFor has a target. The label should be clickable.

Accept terms and conditions

import { UncontrolledCheckbox } from "stylus-ui/Checkbox";

export default () => {
  return (
    <UncontrolledCheckbox
      id="uncontrolled-checkbox-with-label"
      label="Accept terms and conditions"
    />
  );
};

Help text

Display informative, secondary text beneath a label by passing helpText.

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

import { UncontrolledCheckbox } from "stylus-ui/Checkbox";

export default () => {
  return (
    <div className="max-w-[260px]">
      <UncontrolledCheckbox
        id="uncontrolled-with-help-text"
        label="Accept terms and conditions"
        helpText="You agree to our Terms of Service and Privacy Policy."
      />
    </div>
  );
};

Sizing

A smaller version of the checkbox may be used by passing size="sm".

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

import { UncontrolledCheckbox } from "stylus-ui/Checkbox";

export default () => {
  return (
    <div className="max-w-[260px]">
      <UncontrolledCheckbox
        id="sm-uncontrolled-with-help-text"
        label="Accept terms and conditions"
        helpText="You agree to our Terms of Service and Privacy Policy."
        size="sm"
      />
    </div>
  );
};

Dark mode

Set theme to dark to use the dark theme.

Now using the dark theme

import { UncontrolledCheckbox } from "stylus-ui/Checkbox";

export default () => {
  return (
    <div className="max-w-[260px]">
      <UncontrolledCheckbox
        id="uncontrolled-with-dark-theme"
        label="Now using the dark theme"
        theme="dark"
      />
    </div>
  );
};

API Reference

UncontrolledCheckbox

Inherits properties from HTMLButtonElement.

Prop	Type	Default
align	"left""right"	"left"
asChild	boolean	false
defaultChecked	boolean
disabled	boolean
helpText	string
id	string
label	string
name	string
required	boolean
size	"default""sm"	"default"
theme	"light""dark"	"light"
value	string