Skip to main content



OUI Checkbox Label

Quick Start#

  1. Begin by installing via your favourite package manager

npm install @oui-ui/checkbox

  1. Use in your HTML, JSX, or whatever:
<!DOCTYPE html>
<title>Quick Start</title>
<meta charset="UTF-8" />
<!-- Use web components in your HTML like regular built-in elements. -->
<p slot="label">Hey there</p>
<div slot="indicator" class="indicator"></div>
<!-- oui-ui web components use standard JavaScript modules. -->
<script type="module">
import '@oui-ui/checkbox'
  1. Add some custom css to your checkbox
oui-checkbox::part(indicator) {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
border-radius: 2px;
height: 24px;
width: 24px;
margin-right: 8px;
position: relative;
oui-checkbox[checked] .indicator {
background: red;
width: 100%;
height: 100%;
oui-checkbox[indeterminate='true'] .indicator {
background: red;
border-radius: 2px;
height: 30%;
width: 65%;