Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Select & Textarea in Bootstrap 5
Select Dropdowns & Textareas: Learn about styled dropdown menus and multi-line text inputs in Bootstrap 5.
Basic Select Dropdowns
Standard Select Inputs
Hold Ctrl/Cmd to select multiple options
Shows 3 options at once
<!-- Basic Select -->
<div class="mb-3">
<label for="basicSelect" class="form-label">Basic Select</label>
<select class="form-select" id="basicSelect">
<option selected>Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<!-- Disabled Select -->
<select class="form-select" disabled>
<option>Cannot select this</option>
</select>
<!-- Multiple Select -->
<select class="form-select" multiple>
<option selected>Option 1</option>
<option>Option 2</option>
</select>
<!-- Select with Size -->
<select class="form-select" size="3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Select Sizing
Different Select Sizes
<!-- Select Sizing --> <select class="form-select form-select-sm"> <option>Small select</option> </select> <select class="form-select"> <option>Default select</option> </select> <select class="form-select form-select-lg"> <option>Large select</option> </select>
Select with Option Groups
Organized Select Options
<!-- Select with Option Groups -->
<select class="form-select">
<option selected>Choose a category</option>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
<optgroup label="Dairy" disabled>
<option value="milk">Milk</option>
<option value="cheese">Cheese</option>
</optgroup>
</select>
<!-- Pre-selected Option -->
<select class="form-select">
<option value="option1">Option 1</option>
<option value="option2" selected>Option 2 (Selected)</option>
<option value="option3">Option 3</option>
</select>Basic Textarea
Textarea Inputs
<!-- Basic Textarea -->
<div class="mb-3">
<label for="basicTextarea" class="form-label">Basic Textarea</label>
<textarea
class="form-control"
id="basicTextarea"
rows="3"
placeholder="Enter your message..."
></textarea>
</div>
<!-- Disabled Textarea -->
<textarea
class="form-control"
rows="3"
disabled
placeholder="Disabled"
></textarea>
<!-- Readonly Textarea -->
<textarea
class="form-control"
rows="3"
readonly
value="Cannot be edited"
></textarea>
<!-- Required Textarea -->
<textarea
class="form-control"
rows="3"
required
placeholder="Required field"
></textarea>Textarea Sizing and Options
Advanced Textarea Features
Textarea with Maxlength
Character count: 0/100
CSS:
resize: none;Textarea with Different Resize Options
<!-- Textarea Sizing --> <textarea class="form-control form-control-sm" rows="2"></textarea> <textarea class="form-control" rows="3"></textarea> <textarea class="form-control form-control-lg" rows="4"></textarea> <!-- Textarea with Maxlength --> <textarea class="form-control" rows="3" maxlength="100" placeholder="Max 100 characters" ></textarea> <!-- Disable Manual Resize --> <textarea class="form-control" rows="1" style="resize: none;" ></textarea> <!-- Horizontal Resize Only --> <textarea class="form-control" rows="2" style="resize: horizontal;" ></textarea> <!-- Vertical Resize Only --> <textarea class="form-control" rows="2" style="resize: vertical;" ></textarea>
Practical Examples
Contact Form Example
<!-- Contact Form -->
<form>
<div class="mb-3">
<label for="contactSubject" class="form-label">Subject</label>
<select class="form-select" id="contactSubject">
<option selected>Select a subject</option>
<option value="support">Technical Support</option>
<option value="sales">Sales Inquiry</option>
</select>
</div>
<div class="mb-3">
<label for="contactMessage" class="form-label">Message</label>
<textarea
class="form-control"
id="contactMessage"
rows="4"
placeholder="Describe your issue..."
required
></textarea>
</div>
</form>Feedback Form Example
<!-- Feedback Form -->
<form>
<div class="mb-3">
<label for="feedbackType" class="form-label">Feedback Type</label>
<select class="form-select form-select-sm" id="feedbackType">
<option selected>General Feedback</option>
<option value="bug">Bug Report</option>
<option value="feature">Feature Request</option>
</select>
</div>
<div class="mb-3">
<label for="feedbackDetails" class="form-label">Detailed Feedback</label>
<textarea
class="form-control form-control-lg"
id="feedbackDetails"
rows="5"
placeholder="Provide detailed feedback..."
maxlength="500"
></textarea>
</div>
</form>Best Practices
Select Dropdown Best Practices
- Use option groups: Organize related options with
<optgroup> - Provide a default selection: Always include a descriptive default option
- Consider searchability: For long lists, consider using searchable select components
- Use appropriate sizing: Match select size with other form elements
- Limit multiple selections: Use multiple select sparingly; consider checkboxes instead
Textarea Best Practices
- Set appropriate rows: Use
rowsattribute to control initial height - Consider maxlength: Set character limits when necessary
- Use placeholder text: Provide clear examples of expected input
- Control resize behavior: Use CSS
resizeproperty appropriately - Match sizing: Keep textarea size consistent with other form elements
Common Mistakes to Avoid
- ❌ Using selects for binary choices (use radio buttons instead)
- ❌ Not grouping related options in long select lists
- ❌ Making textareas too small for their intended content
- ❌ Forgetting to disable manual resize when it's not needed
- ❌ Using textarea for single-line input (use text input instead)
