Creates a multiselection check box list based on the provided item source. Bootstrap 5 compatible.
$ dotnet add package CheckBoxList.Core.BS5Creates a multiselection check box list based on the provided item source. Bootstrap 5 compatible.
Note: This project is based on the original CheckBoxList.Core by Ganesh Narayan Jangir. This fork adds Bootstrap 5 support and targets .NET 10.
Bootstrap5Basic template using Bootstrap 5 form-check structureBootstrap5Inline template using form-check-inline for horizontal layoutsid and for attributesCheckBoxList.Core to CheckBoxList.Core.BS5CheckBoxList.Core.* to CheckBoxList.Core.BS5.*Install-Package CheckBoxList.Core.BS5
dotnet add package CheckBoxList.Core.BS5
In _ViewImports.cshtml:
@addTagHelper *, CheckBoxList.Core.BS5
using CheckBoxList.Core.BS5.Models;
public IActionResult Index()
{
List<CheckBoxItem> checkBoxItems = new List<CheckBoxItem>()
{
new CheckBoxItem(1, "Option 1"),
new CheckBoxItem(2, "Option 2", isChecked: true),
new CheckBoxItem(3, "Option 3", isDisabled: true),
new CheckBoxItem(4, "Option 4", isChecked: true, isDisabled: true)
};
return View(checkBoxItems);
}
public IActionResult Result(List<int> selectedIds)
{
return View(selectedIds);
}
@model List<CheckBoxList.Core.BS5.Models.CheckBoxItem>
<form asp-action="Result" method="post">
<check-box-list name="selectedIds" items="Model" template="Bootstrap5Basic"></check-box-list>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
| Template | Description | Output |
|---|---|---|
Basic | Plain HTML checkboxes | <label><input>...</label><br> |
Bootstrap3Basic | Bootstrap 3 stacked | <div class="checkbox">... |
Bootstrap3Inline | Bootstrap 3 inline | <label class="checkbox-inline">... |
Bootstrap5Basic | Bootstrap 5 form-check (recommended) | <div class="form-check">... |
Bootstrap5Inline | Bootstrap 5 inline | <div class="form-check form-check-inline">... |
<div class="form-check">
<input class="form-check-input" type="checkbox" name="selectedIds" value="1" id="selectedIds_0">
<label class="form-check-label" for="selectedIds_0">Option 1</label>
</div>
MIT