A
V
Checks & Radio Buttons
Effortless Selection Controls
Enhance user interaction with well-designed checkboxes and radio buttons. These essential UI elements allow users to make selections easily, ensuring a smooth and intuitive experience across different applications.
Key Features:
- Customizable Styles: Easily style checkboxes and radio buttons to match your design system.
- Accessible & User-Friendly: Designed for ease of use across devices and assistive technologies.
- Grouped Options: Seamlessly organize multiple choices with radio groups.
- Interactive Feedback: Provides clear visual cues for selection states.
- Lightweight & Efficient: Minimalist design that ensures smooth performance.
- Flexible Implementations: Works with forms, filters, settings, and more.
Simple Checkbox
This design emphasizes usability and clarity, allowing users to easily identify and select multiple options without visual clutter. The checkboxes are styled with subtle borders, adequate spacing, and clear labels, ensuring accessibility and a user-friendly experience across devices. Minimalistic styling ensures that the checkboxes integrate seamlessly into modern UI layouts, making them ideal for both forms and interactive components.
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="CkBx Wh15 Ht15 Mn0 Br1 CrBrGy80Lt green" type="checkbox" value="" id="checkDefault" style="--checkbox-color: hsla(var(--CrTeH) 100% 50%);">
<label class="MnLt5" for="checkDefault">Theme Color Checkbox</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="CkBx Wh15 Ht15 Mn0 Br1 CrBrGy80Lt red" type="checkbox" value="" id="checkDefault1" style="--checkbox-color: red;">
<label class="MnLt5" for="checkDefault1">Red Color Checkbox</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="checkbox" value="" id="checkDefault2">
<label class="MnLt5" for="checkDefault2">Default Color Checkbox</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="CkBx Wh15 Ht15 Mn0 Br1 CrBrGy80Lt green" type="checkbox" value="" id="checkedDefault" style="--checkbox-color: hsla(var(--CrTeH) 100% 50%);" checked>
<label class="MnLt5" for="checkedDefault">Checked Theme Color Checkbox</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="CkBx Wh15 Ht15 Mn0 Br1 CrBrGy80Lt red" type="checkbox" value="" id="checkedDefault1" style="--checkbox-color: red;" checked>
<label class="MnLt5" for="checkedDefault1">Checked Red Color Checkbox</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="checkbox" value="" id="checkedDefault2" checked>
<label class="MnLt5" for="checkedDefault2">Checked Default Color Checkbox</label>
</div>
Disabled Checkbox
This variant communicates its inactive state clearly by using muted colors and removing interactivity, while still preserving the overall structure and alignment of enabled checkboxes. The design prevents user interaction while visually indicating that the option is unavailable or predetermined. Subtle styling—such as reduced opacity, a grayed-out label, and a non-interactive cursor—helps maintain consistency across form elements without drawing unnecessary attention. This ensures that even in a disabled state, the checkbox remains easy to understand, visually cohesive, and accessible within the user interface.
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="checkbox" value="" id="checkDefault" disabled>
<label class="MnLt5" for="checkDefault">Default disabled checkbox</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="checkbox" value="" id="checkChecked" checked disabled>
<label class="MnLt5" for="checkChecked">Checked disabled checkbox</label>
</div>
Simple Radio
This design focuses on clarity and ease of use, presenting users with a set of mutually exclusive options in a visually intuitive format. Each radio button is styled with subtle outlines, sufficient spacing, and clear, readable labels to ensure effortless navigation and selection. The minimal aesthetic avoids unnecessary decoration, keeping the interface clean while still offering strong visual feedback when an option is selected. Ideal for forms and filters, this radio design balances functionality with elegance, providing a seamless user experience across all screen sizes and devices.
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="RoBn Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt green" type="radio" id="radioDefault" name="radioDefault" style="--radio-color: hsla(var(--CrTeH) 100% 50%);">
<label class="MnLt5" for="radioDefault">
Theme Color Radio Button
</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="RoBn Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt green" type="radio" id="radioDefault1" name="radioDefault1" style="--radio-color: red;">
<label class="MnLt5" for="radioDefault">
Red Radio Button
</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt green" type="radio" id="radioDefault2" name="radioDefault2">
<label class="MnLt5" for="radioDefault2">
Default Radio Button
</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="RoBn Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="radioDefault" name="radioCheckedDefault" style="--radio-color: hsla(var(--CrTeH) 100% 50%);" checked>
<label class="MnLt5" for="radioCheckedDefault">
Theme Color Radio Button
</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="RoBn Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="radioDefault" name="radioCheckedDefault1" style="--radio-color: red;" checked>
<label class="MnLt5" for="radioCheckedDefault1">
Red Radio Button
</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="radioDefault" name="radioCheckedDefault2" checked>
<label class="MnLt5" for="radioCheckedDefault2">
Default Radio Button
</label>
</div>
Example Gender Selection
This example demonstrates a simple gender selection interface using radio buttons, allowing users to choose one option from a defined set. The layout is intuitive, with clearly labeled choices spaced evenly for readability and ease of interaction. The clean styling ensures the component integrates seamlessly into various form designs while maintaining accessibility and responsiveness.
Each radio option is mutually exclusive, providing clear feedback upon selection. The minimal design avoids distractions and supports an inclusive, user-friendly experience across different platforms and devices.
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="RoBn Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="male" name="gender" style="--radio-color: green;" checked>
<label class="MnLt5" for="male">Male</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="RoBn Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="female" style="--radio-color: green;" name="gender">
<label class="MnLt5" for="female">Female</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="RoBn Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="cantTell" style="--radio-color: green;" name="gender">
<label class="MnLt5" for="cantTell">Can't Tell</label>
</div>
Disable Radio
This disabled state visually communicates that the radio option is inactive and cannot be selected, often used to indicate unavailable choices or preset conditions. The styling typically includes muted colors, reduced opacity, and a default cursor to clearly distinguish it from active selections, while still maintaining alignment with the overall radio button layout.
Even though interaction is restricted, the design preserves consistency and clarity, ensuring users understand which options are currently inaccessible without confusion. This approach helps maintain a clean and cohesive interface while enhancing the user experience through thoughtful visual feedback and accessibility support.
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="radioDisabledDefault" name="example" disabled>
<label class="MnLt5" for="radioDisabledDefault">
Disabled radio
</label>
</div>
<div class="DyFx FxAnIsCr FxJyCtSt">
<input class="Wh15 Ht15 Mn0 CrBdWe Br1 CrBrGy80Lt" type="radio" id="radioDisabledChecked" name="example" checked disabled>
<label class="MnLt5" for="radioDisabledChecked">
Disabled checked radio
</label>
</div>