Overview
The checkbox component uses a hidden native input element combined with a styled label to create a custom UI.
- Fully customizable design
- Accessible and semantic HTML
- Smooth check animation
- Keyboard focus support
Basic usage
Use a label wrapper with an input and text element inside.
Checkbox HTML
<label class="checkbox" data-anim-checkbox>
<input
class="checkbox__input"
type="checkbox"
name="form[]"
value="1"
>
<span class="checkbox__text">
Checkbox text
</span>
</label>
Structure
Component structure
.checkbox
├ .checkbox__input
└ .checkbox__text
States
- Checked state — controlled via :checked
- Focus state — visible outline on keyboard focus
Animation
The check indicator scales from 0 to 1 using CSS transform.
Customization
You can easily customize the checkbox using CSS.
- Change size via width / height
- Modify border and background colors
- Adjust animation timing
Download
Use this checkbox component to build clean and modern forms with consistent UI across all browsers.