Django Select Component

Select renders a styled <select> element compatible with Django form fields. Size and colour variants match the other data-input components for consistent form layouts.

Basic Select

Preview

Code

<c-lb.select class="w-56">
  <option disabled selected>Pick a color</option>
  <option>Crimson</option>
  <option>Amber</option>
  <option>Emerald</option>
</c-lb.select>

Color Variants

Preview

Code

<div class="flex flex-col gap-2">
  <c-lb.select class="w-56" variant="primary"><option>Primary</option></c-lb.select>
  <c-lb.select class="w-56" variant="secondary"><option>Secondary</option></c-lb.select>
  <c-lb.select class="w-56" variant="accent"><option>Accent</option></c-lb.select>
  <c-lb.select class="w-56" variant="success"><option>Success</option></c-lb.select>
  <c-lb.select class="w-56" variant="warning"><option>Warning</option></c-lb.select>
  <c-lb.select class="w-56" variant="error"><option>Error</option></c-lb.select>
</div>

With Fieldset

Preview

Browsers

Optional

Code

<c-lb.fieldset legend="Browsers">
  <c-lb.select class="w-56">
    <option disabled selected>Pick a browser</option>
    <option>Chrome</option>
    <option>Firefox</option>
    <option>Safari</option>
  </c-lb.select>
  <c-lb.label>Optional</c-lb.label>
</c-lb.fieldset>

API Reference

`c-lb.select`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	neutral primary secondary accent info success warning error	-	No	Select color variant
size	xs sm md lg xl	`md`	No	Select size
ghost	boolean	`False`	No	Ghost/transparent styling variant
validate	boolean	`False`	No	Enable validation styling

Slot Name	Description
default	Option elements for the select dropdown