Selection Form Elements

Bootstrap Form Selection Elements 🎯

The Choosing Adventure!

Imagine you’re at a magical ice cream shop. Sometimes you can pick just one flavor (that’s a radio button). Sometimes you can pick many toppings (those are checkboxes). And sometimes there’s a big menu with a list to scroll through (that’s a select dropdown)!

Bootstrap helps us build these “choosers” for websites—making them look beautiful and work perfectly on any device!

🍦 Select Elements: The Dropdown Menu

Think of a select element like a treasure chest that pops open to show all your choices!

Basic Select

<select class="form-select">
  <option selected>Pick your flavor</option>
  <option value="1">Chocolate</option>
  <option value="2">Vanilla</option>
  <option value="3">Strawberry</option>
</select>

What’s happening?

• form-select → Bootstrap’s magic class for beautiful dropdowns
• selected → The default choice shown first
• value → The secret code sent when you submit

Select Sizes

<!-- Big select for easy touching -->
<select class="form-select form-select-lg">
  <option>Large dropdown</option>
</select>

<!-- Regular size -->
<select class="form-select">
  <option>Default dropdown</option>
</select>

<!-- Tiny select for tight spaces -->
<select class="form-select form-select-sm">
  <option>Small dropdown</option>
</select>

Disabled Select

<select class="form-select" disabled>
  <option>Can't touch this!</option>
</select>

The disabled attribute grays it out—like a locked treasure chest!

graph TD
    A["User Clicks Select"] --> B["Dropdown Opens"]
    B --> C["User Picks Option"]
    C --> D["Selection Saved"]
    D --> E["Dropdown Closes"]

✅ Checkboxes: Pick Many!

Checkboxes are like a shopping list—you can check off as many items as you want!

Basic Checkbox

<div class="form-check">
  <input class="form-check-input"
         type="checkbox"
         id="sprinkles">
  <label class="form-check-label"
         for="sprinkles">
    Add sprinkles
  </label>
</div>

The Key Parts:

Checked by Default

<div class="form-check">
  <input class="form-check-input"
         type="checkbox"
         checked
         id="whippedCream">
  <label class="form-check-label"
         for="whippedCream">
    Whipped cream (pre-selected!)
  </label>
</div>

Add checked to start with a checkmark!

🔘 Radios: Pick Only One!

Radio buttons are like choosing one best friend to sit with at lunch—you can only pick one at a time!

Basic Radio Group

<div class="form-check">
  <input class="form-check-input"
         type="radio"
         name="cone"
         id="waffle">
  <label class="form-check-label"
         for="waffle">
    Waffle cone
  </label>
</div>

<div class="form-check">
  <input class="form-check-input"
         type="radio"
         name="cone"
         id="sugar">
  <label class="form-check-label"
         for="sugar">
    Sugar cone
  </label>
</div>

<div class="form-check">
  <input class="form-check-input"
         type="radio"
         name="cone"
         id="cup">
  <label class="form-check-label"
         for="cup">
    Cup (no cone)
  </label>
</div>

Super Important: All radios in a group need the same name attribute. That’s how the browser knows they’re teammates!

graph TD
    A["Radio Group: name='cone'"] --> B["Waffle"]
    A --> C["Sugar"]
    A --> D["Cup"]
    B -.->|Click| E["Others Auto-Uncheck"]
    C -.->|Click| E
    D -.->|Click| E

➡️ Inline Checks: Side by Side!

Sometimes you want choices to sit next to each other instead of stacking up. Perfect for “Yes/No” questions!

Inline Checkboxes

<div class="form-check form-check-inline">
  <input class="form-check-input"
         type="checkbox"
         id="nuts">
  <label class="form-check-label"
         for="nuts">Nuts</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input"
         type="checkbox"
         id="cherry">
  <label class="form-check-label"
         for="cherry">Cherry</label>
</div>

Inline Radios

<div class="form-check form-check-inline">
  <input class="form-check-input"
         type="radio"
         name="size"
         id="small">
  <label class="form-check-label"
         for="small">Small</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input"
         type="radio"
         name="size"
         id="medium">
  <label class="form-check-label"
         for="medium">Medium</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input"
         type="radio"
         name="size"
         id="large">
  <label class="form-check-label"
         for="large">Large</label>
</div>

Just add form-check-inline and they line up like ducks in a row! 🦆🦆🦆

🎚️ Switches: The Toggle Magic!

Switches are fancy checkboxes that look like light switches—ON or OFF!

Basic Switch

<div class="form-check form-switch">
  <input class="form-check-input"
         type="checkbox"
         id="darkMode">
  <label class="form-check-label"
         for="darkMode">
    Enable dark mode
  </label>
</div>

The Secret: Add form-switch to the wrapper, and the checkbox becomes a beautiful toggle!

Checked Switch

<div class="form-check form-switch">
  <input class="form-check-input"
         type="checkbox"
         checked
         id="notifications">
  <label class="form-check-label"
         for="notifications">
    Notifications ON
  </label>
</div>

🚫 Disabled Checks and Radios

Sometimes you need to show an option but not let people click it—like a toy behind glass!

Disabled Checkbox

<div class="form-check">
  <input class="form-check-input"
         type="checkbox"
         disabled
         id="soldOut">
  <label class="form-check-label"
         for="soldOut">
    Rocky Road (sold out!)
  </label>
</div>

Disabled Radio

<div class="form-check">
  <input class="form-check-input"
         type="radio"
         name="delivery"
         disabled
         id="drone">
  <label class="form-check-label"
         for="drone">
    Drone delivery (coming soon)
  </label>
</div>

Disabled Switch

<div class="form-check form-switch">
  <input class="form-check-input"
         type="checkbox"
         disabled
         id="premium">
  <label class="form-check-label"
         for="premium">
    Premium features (upgrade needed)
  </label>
</div>

graph TD
    A["Disabled Element"] --> B["Grayed Out Look"]
    A --> C["Cannot Click"]
    A --> D["Shows Unavailable Option"]

🎨 Quick Class Reference

🚀 Pro Tips!

1. Always match id and for — This makes labels clickable!
2. Use name for radio groups — Same name = same group
3. Switches ARE checkboxes — They just look different
4. Disabled ≠ Hidden — Users see it but can’t interact

🎉 You Did It!

Now you know how to create:

• Select dropdowns for long lists
• Checkboxes for picking many
• Radios for picking one
• Inline checks for side-by-side options
• Switches for on/off toggles
• Disabled states for unavailable options

Go build something awesome! 🏗️