Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to style radio buttons, checkboxes, and file inputs with Bootstrap 5.
Radio Buttons and Checkboxes without Labels
We can add radio buttons and checkboxes without labels.
To do that, we can write:
<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="">
</div>
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="">
</div>
to add them.
Toggle Buttons
Bootstrap lets us turn checkboxes and radio buttons into toggle buttons.
To do that, we can write:
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">toggle</label>
to add the toggle button.
It’ll display differently depending on if it’s toggled on or off.
The id of the input and the for attribute of the label have to match.
Radio Toggle Buttons
We can do the same for radio buttons.
For example, we can write:
<div class="btn-group">
<input type="radio" class="btn-check" name="options" id="apple" autocomplete="off" checked>
<label class="btn btn-secondary" for="apple">apple</label>
<input type="radio" class="btn-check" name="options" id="orange" autocomplete="off">
<label class="btn btn-secondary" for="orange">orange</label>
<input type="radio" class="btn-check" name="options" id="grape" autocomplete="off">
<label class="btn btn-secondary" for="grape">grape</label>
</div>
to add a button group.
Each button is a group is a radio button.
We use the btn-group class to style the button group.
The input type is set to radio .
btn-check is the class to make them display as toggle buttons.
And the id of the input has to match the for attribute value of the label .
Outlined Styles
The toggle can have outlined styles instead of a background color.
For example, we can write:
<div class="btn-group">
<input type="radio" class="btn-check" name="options" id="apple" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="apple">apple</label>
<input type="radio" class="btn-check" name="options" id="orange" autocomplete="off">
<label class="btn btn-outline-secondary" for="orange">orange</label>
<input type="radio" class="btn-check" name="options" id="grape" autocomplete="off">
<label class="btn btn-outline-secondary" for="grape">grape</label>
</div>
to make the buttons that aren’t chosen display an outline.
We add the word outline in the class name for the label.
For checkboxes, we can write:
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">apple</label><br>
to make the toggle button displayed with outline styles instead of a background color.
File Browser
Bootstrap 5 provides a file browser to let users select a file.
For example, we can write:
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose a file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
to add a file input with an input with the type set to file .
Also, we add the label with the form-file-label class.
Inside it, we add our placeholder, which is the span with the form-file-text class.
We also have a span with the form-file-button class to display a button we can click to show the file browser to let us select a file.
To disable the file input, we can add the disabled prop to the input.
For example, we can write:
<div class="form-file">
<input type="file" class="form-file-input" id="customFile" disabled>
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
to disable the file input.
If we have longer placeholder text, it’ll be truncated with an ellipsis added at the end:
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFile">
<span class="form-file-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim, fringilla lacus ut, rutrum ligula. Morbi euismod accumsan augue, sit amet finibus ipsum ultrices ac. Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis, egestas posuere nisl maximus. Aenean commodo laoreet enim, sit amet tincidunt nisl porttitor non. Ut vestibulum mauris urna, eget consectetur tellus maximus at. Suspendisse pharetra ut erat sed euismod.
</span>
<span class="form-file-button">Browse</span>
</label>
</div>
Conclusion
We can style radio buttons and checkboxes as toggle buttons.
Also, Bootstrap 5 comes with its own file input.