Skip to main content
Last updated on
Version: 1.0.0

Checkbox

Overview​

Checkbox allows users to select one, multiple, or no options from a list.

There are three supported types:

  • Label with text only (default)
  • Label with icon
  • Label with avatar

Checkboxes are displayed in a vertical layout by default, but can also be arranged horizontally when required.

A checkbox supports five states:

  • Unchecked (Default)
  • Checked
  • Indeterminate
  • Disabled - unchecked
  • Disabled - checked

Label with text only (default)​

The checkbox contains a label with text only.

Vertical List​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Horizontal List​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Label with icon​

The checkbox contains a label with an icon.

Vertical List​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Horizontal List​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Label with avatar​

The checkbox contains a label with an avatar.

Vertical List​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Horizontal List​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

User Experience​

✨Box and label can be clickable.

✨Keep items in a logical order, whether alphabetically or categorically.

✨Press the Tab key to move focus to the next checkbox, following a left-to-right, top-to-bottom order.

✨Press the Space bar to select/deselect an item.

Figma​

All details and specifications in the design can be referenced through the Figma link below.

Checkbox UI Design

Last updated on