Checkbox

The cornerstone of any UI component is probably the checkbox. Pretty Checkbox support checkoxes with a wide range of usage. Be sure to checkout the basic concepts guide for more info!

Basic Checkbox

Our basic checkbox can take on three different shapes: square, p-curve, p-round

<div class="pretty p-default">

<input type="checkbox" />

<div class="state">

<label>Regular Checkbox</label>

</div>

</div>

<div class="pretty p-default p-curve">

<input type="checkbox" />

<div class="state">

<label>Curved Checkbox</label>

</div>

</div>

<div class="pretty p-default p-round">

<input type="checkbox" />

<div class="state">

<label>Round Checkbox</label>

</div>

</div>

Regular Checkbox

Curved Checkbox

Round Checkbox

Colors, Icon, and Animations

Checkbox supports colors, icons, animations. There are five animations classes available that can be added to the root div: p-smooth, p-pulse, p-tada, p-jelly, and p-rotate.

<div class="pretty p-default p-round p-smooth">

<input type="checkbox" />

<div class="state p-primary">

<label>Smooth</label>

</div>

</div>

<div class="pretty p-icon p-round p-jelly">

<input type="checkbox" />

<div class="state p-primary">

<i class="icon mdi mdi-check"></i>

<label>Jelly</label>

</div>

</div>

<div class="pretty p-icon p-tada p-plain">

<input type="checkbox" />

<div class="state">

<i class="icon mdi mdi-weather-night"></i>

<label>Tada</label>

</div>

</div>

<div class="pretty p-icon p-rotate">

<input type="checkbox" />

<div class="state p-danger-o">

<i class="icon mdi mdi-close"></i>

<label>Rotate</label>

</div>

</div>

<div class="pretty p-default p-thick p-pulse">

<input type="checkbox" />

<div class="state p-warning-o">

<label>Pulse</label>

</div>

</div>

Smooth

Jelly

Tada

Rotate

Pulse

Indeterminate

Pretty checkbox supports indeterminate states, too although you'll need to use a little javascript to make this happen:

toggleIndeterminate.js

// checkbox: HTMLInputElement

// indeterminate: boolean

function toggleIndeterminate(checkbox, indeterminate) {

if (checkbox) {

checkbox.indeterminate = indeterminate;

// don't forget a11y

checkbox.setAttribute('aria-checked', indeterminate ? 'mixed' : checkbox.checked);

}

}

Indeterminates with React

One way we can make this work is by exposing an indeterminate prop and passing a ref to the HTMLInputElement, the main point here is we want our effect to run whenever indeterminate changes:

Checkbox.jsx

import React from 'react';

function Checkbox({ children, indeterminate, color = '', className = '', ...rest }) {

const ref = React.useRef(null);

React.useEffect(() => {

if (ref.current) {

ref.current.indeterminate = indeterminate;

}

}, [indeterminate]);

return (

<div className={`pretty ${className}`} {...rest}>

<input type="checkbox" ref={ref} />

<div className={`state ${color}`}>

<label>{children}</label>

</div>

</div>

);

}

Normal

Indeterminate

Indeterminates with React Class

Not on the hooks train yet 🚂 ? No biggie. Just remember we can register side effects in componentDidMount since it's called whenever props or state changes 😉

Checkbox.jsx

import React from 'react';

export class Checkbox extends React.Component {

constructor(props) {

super(props);

this.ref = React.createRef();

}

componentDidMount() {

if (this.ref.current) {

this.ref.current.indeterminate = this.props.indeterminate;

}

}

render() {

return (

<div className={`pretty ${this.props.className}`}>

<input type="checkbox" ref={this.ref} />

<div className={`state ${this.props.color}`}>

<label>{this.props.children}</label>

</div>

</div>

);

}

}