Skip to content

Files

Latest commit

597f09f · Nov 2, 2019

History

History

select

-----------------------------------------------------

➤ wl-select

Select one or more values from a set of options.

-----------------------------------------------------

➤ Properties

Property Attribute Type Default Description
autocomplete autocomplete "on" | "off" | undefined Whether autocomplete is on or off.
disabled disabled boolean false Disables the element.
filled filled boolean false Fills the input with a solid color.
label label string | undefined Label text.
name name string | undefined Name of the native form element.
outlined outlined boolean false Makes the input outlined.
readonly readonly boolean false Makes the element readonly (disabled but tabbable)
required required boolean false Makes the element required in a form context.
role role AriaRole "select" Role of the select.
value value string Value of the form element.
valueAsNumber valueAsNumber number Value of the slider.

-----------------------------------------------------

➤ Events

Event Description
input Dispatches from the native input event each time the input changes.
invalid Dispatched when the input becomes invalid.
submit Dispatched when the enter key is hit while pressing ctrl or the meta-key.

-----------------------------------------------------

➤ Slots

Name Description
elements go here.
after Content after the input.
before Content before the input.

-----------------------------------------------------

➤ CSS Custom Properties

Property Description
--input-before-after-color Color of the before and after slots
--input-bg Default background
--input-bg-filled Background when filled
--input-bg-filled-hover Background when filled and hover
--input-border-radius-filled Border radius when filled
--input-border-radius-outlined Border radius when outlined
--input-border-style Border style
--input-border-style-disabled Border style when disabled
--input-border-width Border width
--input-color Default color
--input-color-disabled Color when disabled
--input-font-family Font family
--input-font-size Font size
--input-label-color Color of the label
--input-label-color-disabled Color of the label when disabled
--input-label-font-size Font size of the label
--input-label-space Space between label and input
--input-label-transition Transition of the label
--input-padding-left-right Left and right padding
--input-padding-left-right-outlined Left and right padding when outlined
--input-padding-top-bottom Top and bottom padding
--input-state-color-active Active state color
--input-state-color-disabled Disabled state color
--input-state-color-hover Hover state color
--input-state-color-inactive Inactive state color
--input-state-color-invalid Invalid state color
--input-transition Transition
--select-arrow-height Height of the arrow.

-----------------------------------------------------

➤ Usage

Go here to try the demo.

-----------------------------------------------------

➤ Contributors

Andreas Mehlsen You?
Andreas Mehlsen You?

-----------------------------------------------------

➤ License

Licensed under MIT.