❮ Previous Next ❯

Choice Controls

  • Create custom and accessible checkbox and radio components.

  • Choice controls allow users to select options instead of typing input.
    They are used when choices are known, limited, and predefined.

    What Are Choice Controls ?

    Choice controls are form elements that allow users to:

    • Select one option

    • Select multiple options

    • Confirm agreement

    • Choose preferences

    They reduce typing, reduce errors, and improve clarity.

    Why Styling Choice Controls Matters

    Default browser checkboxes and radios:

    • Look inconsistent across browsers

    • Feel outdated

    • Don’t match modern UI design

    Proper styling:

    • Improves usability

    • Improves visual consistency

    • Improves accessibility

    • Feels professional

      Checkbox Buttons

      What Is a Checkbox ?

      A checkbox allows users to:

      Select one or more options from a list.

      Checkbox answers:

      “Yes / No”
       “On / Off”
       “Select all that apply”

      Common Checkbox Use Cases

      • Accept terms & conditions

      • Select interests

      • Enable settings

      • Multi-select filters

      • Preferences

    Basic Checkbox with Label

    This checkbox is paired with a label using flex layout for better alignment and usability. 

    <label class="flex items-center gap-2">
  <input type="checkbox" />
  <span>Accept terms</span>
</label>

    • Label wrapping improves:

      • Click area

      • Accessibility

      • User experience

    Styled Checkbox with Tailwind

    This checkbox uses Tailwind classes for size, color, and focus ring to enhance appearance and usability. 

    <input
  type="checkbox"
  class="h-4 w-4
         text-blue-500
         border-gray-300
         rounded
         focus:ring-2
         focus:ring-blue-400"
/>

    • This creates:

      • Clean appearance

      • Consistent size

      • Visible focus state

    Checkbox Checked State Styling

    This checkbox changes color when checked using Tailwind’s checked: utilities for visual feedback. 

    <input
  type="checkbox"
  class="checked:bg-blue-500
         checked:border-blue-500"
/>

    • Checked state communicates:

      “This option is selected”

    Disabled Checkbox Styling

    This checkbox appears inactive and non-clickable using opacity and cursor styles in Tailwind. 

    <input
  type="checkbox"
  disabled
  class="opacity-50 cursor-not-allowed"
/>

    • Disabled checkboxes must:

      • Look inactive

      • Block interaction

      • Be clearly understandable

    Checkbox Group Styling

    This example shows multiple checkboxes grouped with proper spacing and alignment using Tailwind. 

    <div class="space-y-2">
  <label class="flex items-center gap-2">
    <input type="checkbox" class="h-4 w-4 text-blue-500" />
    <span>HTML</span>
  </label>

  <label class="flex items-center gap-2">
    <input type="checkbox" class="h-4 w-4 text-blue-500" />
    <span>CSS</span>
  </label>
</div>

    • Checkbox UX Best Practices

      • Use checkboxes for multiple selections

      • Always show label text

      • Keep spacing comfortable

      • Make click area large

      Radio Buttons

      What Is a Radio Button ?

      A radio button allows users to:

      Select only one option from a group.

      Radio answers:

      “Choose one option only”

      Common Radio Button Use Cases

      • Gender selection

      • Payment method

      • Delivery option

      • Subscription plan

      • Single-choice questions

    Basic Radio Button with Label

    This radio button is paired with a label for clear selection and better accessibility. 

    <label class="flex items-center gap-2">
  <input type="radio" name="plan" />
  <span>Basic</span>
</label>
    • All radios in a group must share the same name.

    Styled Radio Button with Tailwind

    This radio button uses Tailwind classes for size, color, and focus ring to improve UI and accessibility. 

    <input
  type="radio"
  class="h-4 w-4
         text-blue-500
         border-gray-300
         focus:ring-2
         focus:ring-blue-400"
/>

    • Radio Button Checked State

      Checked radio shows:

      “This option is chosen”

      Styling ensures clear selection feedback.

    Radio Button Group Styling

    This example groups radio buttons with consistent spacing and shared name for single selection using Tailwind. 

    <div class="space-y-2">
  <label class="flex items-center gap-2">
    <input type="radio" name="payment" class="h-4 w-4 text-blue-500" />
    <span>Credit Card</span>
  </label>

  <label class="flex items-center gap-2">
    <input type="radio" name="payment" class="h-4 w-4 text-blue-500" />
    <span>UPI</span>
  </label>
</div>

    • Checkbox vs Radio

      CheckboxRadio
      Multiple selectionSingle selection
      Independent optionsMutually exclusive
      On / OffChoose one
      Can select manyCan select only one
      Choosing the wrong control confuses users.

      Accessibility Rules for Choice Controls

      Accessible choice controls must:

      • Have labels

      • Be keyboard accessible

      • Have visible focus

      • Not rely only on color

      • Use native input elements

      Never replace native controls without accessibility support.

      Common Beginner Mistakes

      • Using checkbox instead of radio

      • Small click areas

      • Missing labels

      • Inconsistent spacing

      • Removing focus styles

      If users hesitate → choice controls are unclear.

    ❮ Previous Next ❯