The Checkbox component is easy to use -- even easier then using a regular HTML checkbox. All components implemented by pretty-checkbox-react are simple stateless function components.

There are three shapes: default, curve, and round. Use the shape prop to customize.

Default Checkbox

Default
Fill
Thick
Show Code

Curve Checkbox

Default
Fill
Thick
Show Code

Round Checkbox

Default
Fill
Thick
Show Code

Custom Rendering

Pretty Checkbox React APIs are relative inflexible. This is because the underlying TPL, pretty checkbox, is very selector dependent. Almost all the props exposed by pretty checkbox react just append selectors to elements. Like most things, this can lead to challenges. If you're facing issues getting pretty checkbox react to work exactly how you want it to, then you can pass your own children render function or render prop to Checkbox, Switch, or Radio.

Note: in most cases you can make things work using CSS. Please do not misuse this feature. Be sure you understand how pretty-checkbox works before custom rendering. Consult the docs for more information.

Children Render Function

// node is the svg, icon, or image node
<Checkbox>{({ className, node }) => (
    <div className={classNames("state", className, "custom-handle")}>
        <label>My custom label</label>
    </div>
)}</Checkbox>

Render Prop

// node is the svg, icon, or image node
<Checkbox render={({ className, node }) => (
    <div className={classNames("state", className, "custom-handle")}>
        <label>My custom label</label>
    </div>
)} />