Form Select
Judia Builder
Choose your themes & layouts etc.
Select Layouts
Choose your layout.
Vertical
Horizontal
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Brand
Card Layout
Choose borderless or border layout.
Borderless
Border
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light, Dark or Brand Topbar Color.
Light
Dark
Brand
Topbar Images
Choose Topbar Images.
Default Select
Use <select> attribute with numerous options to show value with choice's option.
HTML Preview
<select class="form-select mb-3" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select rounded-pill mb-3" aria-label="Default select example"> <option selected>Search for services</option> <option value="1">Information Architecture</option> <option value="2">UI/UX Design</option> <option value="3">Back End Development</option> </select><select class="form-select" aria-label="Disabled select example" disabled> <option selected>Open this select menu (Disabled)</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
Menu Size
Use multiple attribute to select multiple values and size="your value" attribute to show a number of choice option within a select area.
HTML Preview
<select class="form-select" multiple aria-label="multiple select example"> <option selected>Open this select menu (multiple select option)</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select" size="3" aria-label="size 3 select example"> <option selected>Open this select menu (select menu size)</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select>
Select Size
Use form-select-sm class to set small select size and form-select-lg class to form-select class to set large select size. No such class is required for default select size.
HTML Preview
<select class="form-select form-select-sm mb-3" aria-label=".form-select-sm example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select mb-3" aria-label=".form-select-lg example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select form-select-lg" aria-label=".form-select-lg example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
Choices
Single select input Example
Set data-choices attribute to set a default single select.
Set data-choices data-choices-groups attribute to set option group
Set data-choices data-choices-search-false data-choices-removeItem
Set data-choices data-choices-sorting-false attribute.
Multiple select input
Set data-choices multiple attribute.
Set data-choices data-choices-removeItem multiple attribute.
Set data-choices data-choices-multiple-groups="true" multiple attribute.
Text inputs
Set data-choices data-choices-limit="Required Limit" data-choices-removeItem attribute.
Set data-choices data-choices-text-unique-true attribute.
Set data-choices data-choices-text-disabled-true attribute.