Option Controls
Overview
Option Controls in the Phenix Design System provide customizable, styled alternatives to standard HTML checkbox, radio, switch, and button controls. They maintain the functionality of native form elements while offering enhanced styling and user experience.
Basic Usage
To create an option control, use the .option-control
class with a data-type
attribute to specify the control type:
<!-- Checkbox Option Control -->
<label class="option-control" data-type="checkbox">
<input type="checkbox" name="check-1">
<span class="fas fa-check">Checkbox Example</span>
</label>
<!-- Radio Option Control -->
<label class="option-control" data-type="radio">
<input type="radio" name="radio-1">
<span class="fas fa-circle">Radio Example</span>
</label>
Types of Option Controls
Checkbox
The checkbox option control provides a custom styled checkbox:
<label class="option-control" data-type="checkbox">
<input type="checkbox" name="check-1">
<span class="fas fa-check">Checkbox Example</span>
</label>
Radio Button
The radio option control provides a custom styled radio button:
<label class="option-control" data-type="radio">
<input type="radio" name="radio-1">
<span class="fas fa-circle">Radio Example</span>
</label>
Switch
The switch option control provides a toggle switch:
<label class="option-control" data-type="switch">
<input type="checkbox" name="switch-1">
<span class="switch"></span>
<span>Switch Example</span>
</label>
Button
The button option control provides a button-like appearance:
<label class="option-control" data-type="button">
<input type="checkbox" name="button-1">
<span class="btn outline">Button Option</span>
</label>
Customization
Size Variants
Option controls support different sizes using the size modifier classes:
<!-- Small Option Control -->
<label class="option-control small" data-type="checkbox">
<input type="checkbox" name="check-small">
<span class="fas fa-check">Small Checkbox</span>
</label>
<!-- Default Size -->
<label class="option-control" data-type="checkbox">
<input type="checkbox" name="check-default">
<span class="fas fa-check">Default Checkbox</span>
</label>
<!-- Large Option Control -->
<label class="option-control large" data-type="checkbox">
<input type="checkbox" name="check-large">
<span class="fas fa-check">Large Checkbox</span>
</label>
Custom Colors
You can customize the colors of option controls using CSS variables or utility classes:
<!-- Success Color -->
<label class="option-control success" data-type="checkbox">
<input type="checkbox" name="check-success">
<span class="fas fa-check">Success Checkbox</span>
</label>
<!-- Custom Color Using CSS Variables -->
<label class="option-control" data-type="checkbox" style="--color-active: #f5a623;">
<input type="checkbox" name="check-custom">
<span class="fas fa-check">Custom Color Checkbox</span>
</label>
Custom Icons
You can use different icons for checkbox and radio controls:
<!-- Checkbox with Custom Icon -->
<label class="option-control" data-type="checkbox">
<input type="checkbox" name="check-icon">
<span class="fas fa-thumbs-up">Thumbs Up Checkbox</span>
</label>
<!-- Radio with Custom Icon -->
<label class="option-control" data-type="radio">
<input type="radio" name="radio-icon">
<span class="fas fa-star">Star Radio</span>
</label>
Groups of Option Controls
You can create groups of related option controls:
<div class="mb-20">
<h4 class="mb-10">Select your favorite fruits:</h4>
<!-- Checkbox Group -->
<div class="flexbox flex-wrap gap-10">
<label class="option-control" data-type="checkbox">
<input type="checkbox" name="fruits[]" value="apple">
<span class="fas fa-check">Apple</span>
</label>
<label class="option-control" data-type="checkbox">
<input type="checkbox" name="fruits[]" value="banana">
<span class="fas fa-check">Banana</span>
</label>
<label class="option-control" data-type="checkbox">
<input type="checkbox" name="fruits[]" value="orange">
<span class="fas fa-check">Orange</span>
</label>
</div>
</div>
<div class="mb-20">
<h4 class="mb-10">Select your gender:</h4>
<!-- Radio Group -->
<div class="flexbox flex-wrap gap-10">
<label class="option-control" data-type="radio">
<input type="radio" name="gender" value="male">
<span class="fas fa-circle">Male</span>
</label>
<label class="option-control" data-type="radio">
<input type="radio" name="gender" value="female">
<span class="fas fa-circle">Female</span>
</label>
<label class="option-control" data-type="radio">
<input type="radio" name="gender" value="other">
<span class="fas fa-circle">Other</span>
</label>
</div>
</div>
CSS Variables
The option controls inherit CSS variables from the form controls system, which you can customize:
.option-control {
/* Size variables */
--padding: 15px;
--height: 42px;
--text-size: 14px;
/* Color variables */
--color: transparent;
--color-active: var(--success-color);
--background: var(--component-bg-lvl-1);
--border-size: 2px;
--border-color: var(--gray-color);
}
Accessibility
The Option Controls component maintains accessibility features:
- Proper label association with form controls
- Keyboard navigation for selection
- Focus states for keyboard users
Browser Compatibility
The Option Controls component is compatible with all modern browsers that support CSS variables and flexbox.