Dropdown Input

Default

<x-select name="category" placeholder="Select Category" searchable="false" class="" selected-value="" active-class="">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Bills">Bills</div>
    <div name="x-select-item" value="Service">Service</div>
    <div name="x-select-item" value="Utility">Utility</div>
</x-select>

Default with footer

<x-select name="category" data-icon="o-filter" placeholder="Select Category" searchable="false" class="" selected-value="" active-class="">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Bills">Bills</div>
    <div name="x-select-item" value="Service">Service</div>
    <div name="x-select-item" value="Utility">Utility</div>
    <div name="x-select-footer">
        <a href="#">See more</a>
    </div>
</x-select>

Default disabled

<x-select name="category" data-icon="user" placeholder="Select Category" disabled searchable="false" class="" selected-value="" active-class="">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Bills">Bills</div>
    <div name="x-select-item" value="Service">Service</div>
    <div name="x-select-item" value="Utility">Utility</div>
</x-select>

Chipped Input

Checkbox Type

<x-select searchable="true" id="animal-1" name="animals" selected-value="Antelope, Beeva, Cheetah" multiselect="checkbox" placeholder="Select Animal">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Antelope" alt-name="Antelope">Antelope</div>
    <div name="x-select-item" value="Beeva">Beeva</div>
    <div name="x-select-item" value="Cheetah">Cheetah</div>
    <div name="x-select-item" value="Dolphin">Dolphin</div>
    <div name="x-select-item" value="Elephant">Elephant</div>
    <div name="x-select-item" value="Falcon">Falcon</div>
    <div name="x-select-item" value="Giraffe">Giraffe</div>
    <div name="x-select-item" value="Hedgehog">Hedgehog</div>
    <div name="x-select-item" value="Iguana">Iguana</div>
    <div name="x-select-item" value="Jaguar">Jaguar</div>
    <div name="x-select-item" value="Kangaroo">Kangaroo</div>
    <div name="x-select-item" value="Lion">Lion</div>
</x-select>

Checkmark Type

<x-select searchable="true" id="animal-2" name="animals-1" selected-value="Beeva, Cheetah" multiselect="checkbox" placeholder="Select Animal">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Antelope" alt-name="Antelope">Antelope</div>
    <div name="x-select-item" value="Beeva">Beeva</div>
    <div name="x-select-item" value="Cheetah">Cheetah</div>
    <div name="x-select-item" value="Dolphin">Dolphin</div>
    <div name="x-select-item" value="Elephant">Elephant</div>
    <div name="x-select-item" value="Falcon">Falcon</div>
    <div name="x-select-item" value="Giraffe">Giraffe</div>
    <div name="x-select-item" value="Hedgehog">Hedgehog</div>
    <div name="x-select-item" value="Iguana">Iguana</div>
    <div name="x-select-item" value="Jaguar">Jaguar</div>
    <div name="x-select-item" value="Kangaroo">Kangaroo</div>
    <div name="x-select-item" value="Lion">Lion</div>
</x-select>

Dropdown Sizes

Small

<x-select name="category" data-icon="user" placeholder="Select Category" searchable="false" class="select-small">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Bills">Bills</div>
    <div name="x-select-item" value="Service">Service</div>
    <div name="x-select-item" value="Utility">Utility</div>
</x-select>

Medium

<x-select name="category" data-icon="user" placeholder="Select Category" searchable="false" class="select-medium">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Bills">Bills</div>
    <div name="x-select-item" value="Service">Service</div>
    <div name="x-select-item" value="Utility">Utility</div>
</x-select>

Large

<x-select name="category" data-icon="user" placeholder="Select Category" searchable="false" class="select-large">
    <div name="x-select-item" value="" default></div>
    <div name="x-select-item" value="Bills">Bills</div>
    <div name="x-select-item" value="Service">Service</div>
    <div name="x-select-item" value="Utility">Utility</div>
</x-select>

Customization

input:not([type="checkbox"], [type="radio"]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  --input-border-color: var(--grey-normal);
  --input-active-border-color: var(--primary-normal); 
}

Attributes

Attribute	Type	Default	Description
name	string	""	Specifies the name for the select input, useful for forms.
active-class	string	""	CSS class to apply when the select component is active.
height	string	""	Height of the dropdown menu.
disabled	boolean	false	Disables the dropdown if set.
fixed-dropdown	boolean	false	When true dropdown will be fixed on the screen
data-icon	string	undefined	Sets an icon for the dropdown, specify the icon name.
show-indicator	boolean	"true"	Shows an indicator for the dropdown; set to "false" to hide.
id	string	""	Unique identifier for the select component.
placeholder	string	""	Placeholder text for the select input when no option is selected.
searchable	boolean	"false"	Enables a search box within the dropdown for filtering options.
required	boolean	"false"	Marks the input as required. Set to "true" to enable.
dropdown-width	string	"100%"	Width of the dropdown menu.
class	string	""	CSS classes to be applied to the dropdown component. Classes for sizes includes select-small, select-medium, select-large
selected-value	string	""	The currently selected option.

Children Attributes

Attribute	Type	Default	Description
name*	string	"x-select-item"	required Specifies the element as a child of the select component.
value	string	""	The value of the option.
alt-name	string	""	The alternate name of the option. If not provided the innerHTML of the element will be used
default	""	""	If provided will be displayed first, making it the default to be selected when submitting form data

Customisation

.dropdown {
  --dropdown-max-height: 300px;
  --dropdown-footer-padding: .5rem 1rem 0 .5rem;
}