Select
Form component used for selecting a value from a large list of options, with autocomplete and pagination support
Basic Example
The most basic use case for a select component is to have all the select options predefined using the options
property. This component allows you to easily choose from a set of values and display a computed option label of your choice.
Here are some considerations to be made:
- Each option must be an Object
{}
- Each option must have a unique identifier field, such as
id
- The
selected
value will be the option itself
Disabled State
Setting the disabled
property will disable all interactions with the select component.
You can also disable individual options by setting the option’s disabled
field to true
.
Readonly State
Setting the readonly
property will disable all interactions with the select component, except being able to focus the select.
Clearable Variant
If you need to be able to quickly clear the value of an select, you can add the clearable
property to the select component.
Prefix and Suffix
Inkline allows you to easily add a prefix or suffix to your select. Using prefixes and suffixes you can, for example, indicate your select type using an icon or text.
Prepend and Append
You can add additional content such as select fields, buttons or plain text, to either side of the select by using the prepend and append slots.
Colors
You can use the color
property to set a light
or dark
color for your select.
Sizes
You’re able to use the size
modifier to control the size of your select, using one of the available sizes: sm
, md
, and lg
. The default size is set to md
.
Header and Footer
You can provide a custom header and footer for the select menu using the header
and footer
slots.
Markup Example
The old way to write the select input is still viable, although it doesn’t support the more advanced features that the Inkline 3 Select has to offer.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
animationDuration
TypeNumber
Default300
Description The duration of the hide and show animation - Property
autocomplete
TypeBoolean
Defaultfalse
Description Enable autocomplete functionality - Property
arrow
TypeBoolean
Defaulttrue
Description Displays an arrow on the dropdown pointing to the trigger element - Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the select - Property
clearable
TypeBoolean
Defaultfalse
Description Display the select as clearable - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the select - Property
idField
TypeString
Default'id'
Description The field to be used for identifying the options - Property
keydownTrigger
Typestring[]
Default'up, down, enter, space, tab, esc'
Description The keydown events bound to the trigger element - Property
keydownItem
Typestring[]
Default'up, down, enter, space, tab, esc'
Description The keydown events bound to the select option elements - Property
label
TypeString | Function
Default'label'
Description Used to extract the label from the select option and select value - Property
loading
TypeBoolean
Defaultfalse
Description The loading state of the select - Property
modelValue
TypeObject | String | Number
Default'null'
Description Used to set the field value - Property
minLength
TypeNumber
Default0
Description The minimum input length to open the select dropdown at - Property
name
TypeString
Defaultuid()
Description The unique identifier of the select - Property
options
TypeArray
Default''
Description The options to be displayed in the select component - Property
placeholder
TypeString
Default''
Description The placeholder of the select input - Property
offset
TypeNumber
Default6
Description The offset of the dropdown relative to the trigger element - Property
placement
Type'top' | top-start | top-end | 'bottom' | bottom-start | bottom-end | 'left' | left-start | left-end | 'right' | right-start | right-end
Defaultfalse
Description The placement of the dropdown - Property
popperOptions
TypeObject
Default''
Description Used to override the popper.js options used for creating the dropdown - Property
readonly
TypeBoolean
Defaultfalse
Description The readonly state of the select - Property
scrollTolerance
TypeNumber
Default160
Description The number of pixels until scroll end before loading the next page - Property
selectFirstOptionOnEnter
TypeBoolean
Defaulttrue
Description Selects the first option when pressing enter - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the select - Property
tabindex
TypeNumber | String
Default1
Description The tabindex of the select - Property
type
TypeString
Default'text'
Description The type of the select - Property
total
TypeNumber
Default'undefined'
Description The total number of options, used for infinite scrolling
Slots
Use slots to insert custom content into well-defined component locations.
- Property
prefix
Description Slot for the select prefix content - Property
suffix
Description Slot for the select suffix content - Property
prepend
Description Slot for the select prepend content - Property
append
Description Slot for the select append content - Property
clearable
Description Slot for the clearable button
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue - Property
search
Description Event emitted when input value changes - Property
pagination
Description Event emitted when the next page needs to be loaded
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('white')
Description The background of the select component - Property
----border-top-color
Valuecolor('light-55')
Description The border top color of the select component - Property
----border-right-color
Valuecolor('light-55')
Description The border right color of the select component - Property
----border-bottom-color
Valuecolor('light-55')
Description The border bottom color of the select component - Property
----border-left-color
Valuecolor('light-55')
Description The border left color of the select component - Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the select component - Property
----border-style
Valuevar(--border-style)
Description The border style of the select component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the select component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the select component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the select component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the select component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the select component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the select component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the select component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the select component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the select component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the select component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the select component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the select component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the select component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the select component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the select component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the select component - Property
----color
Valuecontrast-color($color-white)
Description The color of the select component item - Property
----font-size
Valuefont-size()
Description The font size of the select component - Property
----font-weight
Valuefont-weight('normal')
Description The font weight of the select component - Property
----line-height
Valuevar(--line-height)
Description The line height of the select component - Property
----margin-top
Valuecalc(var(--margin-top) / 2)
Description The margin top of the select component - Property
----margin-right
Valuecalc(var(--margin-right) / 2)
Description The margin right of the select component - Property
----margin-bottom
Valuecalc(var(--margin-bottom) / 2)
Description The margin bottom of the select component - Property
----margin-left
Valuecalc(var(--margin-left) / 2)
Description The margin left of the select component - Property
----margin
Valuevar(----margin-top) var(----margin-right) var(----margin-bottom) var(----margin-left)
Description The margin of the select component - Property
----padding-top
Valuevar(--padding-top)
Description The padding top of the select component - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the select component - Property
----padding-bottom
Valuevar(--padding-bottom)
Description The padding bottom of the select component - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the select component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the select component - Property
----min-width
Value240px
Description The minimum width of the select component - Property
----max-width
Value90vw
Description The maximum width of the select component - Property
----max-height
Value300px
Description The maximum height of the select component body - Property
----z-index
Value2000
Description The z-index of the select component - Property
----option--background
Valuevar(----background)
Description The background of the select component option - Property
----option--background--hover
Valuecolor('light-25')
Description The background of the select component option when hovered or focused - Property
----option--background--active
Valuevar(----option-background--active)
Description The background of the select component option when active - Property
----option--background--disabled
Valuetransparent
Description The background of the select component option when disabled - Property
----option--border-top-left-radius
Value0
Description The border top left radius of the modal component - Property
----option--border-top-right-radius
Value0
Description The border top right radius of the modal component - Property
----option--border-bottom-right-radius
Value0
Description The border bottom right radius of the modal component - Property
----option--border-bottom-left-radius
Value0
Description The border bottom left radius of the modal component - Property
----option--border-radius
Valuevar(----option--border-top-left-radius) var(----option--border-top-right-radius) var(----option--border-bottom-right-radius) var(----option--border-bottom-left-radius)
Description The border radius of the modal component - Property
----option--color
Valuevar(----color)
Description The color of the select component option - Property
----option--color--hover
Valuevar(----option--color)
Description The color of the select component option when hovered or focused - Property
----option--color--active
Valuevar(----option--color)
Description The color of the select component option when active - Property
----option--color--disabled
Valuecolor('light-65')
Description The color of the select component option when disabled - Property
----option--padding-top
Valuecalc(var(----padding-top) / 2)
Description The padding top of the select component option - Property
----option--padding-right
Valuevar(----padding-right)
Description The padding right of the select component option - Property
----option--padding-bottom
Valuecalc(var(----padding-bottom) / 2)
Description The padding bottom of the select component option - Property
----option--padding-left
Valuevar(----padding-left)
Description The padding left of the select component option - Property
----option--padding
Valuevar(----option--padding-top) var(----option--padding-right) var(----option--padding-bottom) var(----option--padding-left)
Description The padding of the select component option - Property
----divider--margin
Valuespacing('1/2')
Description The margin of the select component divider - Property
----header--background
Valuecolor('gray-05')
Description The background of the select component header - Property
----header--border-color
Valuevar(----border-color)
Description The border color of the select component header - Property
----header--border-style
Valuevar(----border-style)
Description The border style of the select component header - Property
----header--border-top-width
Valuevar(----border-top-width)
Description The border top width of the select component header - Property
----header--border-right-width
Valuevar(----border-right-width)
Description The border right width of the select component header - Property
----header--border-bottom-width
Value0
Description The border bottom width of the select component header - Property
----header--border-left-width
Valuevar(----border-left-width)
Description The border left width of the select component header - Property
----header--border-width
Valuevar(----header--border-top-width) var(----header--border-right-width) var(----header--border-bottom-width) var(----header--border-left-width)
Description The border width of the select component header - Property
----header--color
Valuevar(----color)
Description The color of the select component header - Property
----header--padding-top
Valuecalc(var(----padding-top) * 3 / 4)
Description The padding top of the select component header - Property
----header--padding-right
Valuevar(----padding-right)
Description The padding right of the select component header - Property
----header--padding-bottom
Valuecalc(var(----padding-bottom) * 3 / 4)
Description The padding bottom of the select component header - Property
----header--padding-left
Valuevar(----padding-left)
Description The padding left of the select component header - Property
----header--padding
Valuevar(----header--padding-top) var(----header--padding-right) var(----header--padding-bottom) var(----header--padding-left)
Description The padding of the select component header - Property
----body--background
Valuevar(----background)
Description The background of the select component body - Property
----body--border-color
Valuevar(----border-color)
Description The border color of the select component body - Property
----body--border-style
Valuevar(----border-style)
Description The border style of the select component body - Property
----body--border-top-width
Valuevar(----border-top-width)
Description The border top width of the select component body - Property
----body--border-right-width
Valuevar(----border-right-width)
Description The border right width of the select component body - Property
----body--border-bottom-width
Valuevar(----border-bottom-width)
Description The border bottom width of the select component body - Property
----body--border-left-width
Valuevar(----border-left-width)
Description The border left width of the select component body - Property
----body--border-width
Valuevar(----body--border-top-width) var(----body--border-right-width) var(----body--border-bottom-width) var(----body--border-left-width)
Description The border width of the select component body - Property
----body--color
Valuevar(----color)
Description The color of the select component body - Property
----body--padding-top
Valuevar(----padding-top)
Description The padding top of the select component body - Property
----body--padding-right
Value0
Description The padding right of the select component body - Property
----body--padding-bottom
Valuevar(----padding-bottom)
Description The padding bottom of the select component body - Property
----body--padding-left
Value0
Description The padding left of the select component body - Property
----body--padding
Valuevar(----body--padding-top) var(----body--padding-right) var(----body--padding-bottom) var(----body--padding-left)
Description The padding of the select component body - Property
----footer--background
Valuecolor('gray-05')
Description The background of the select component footer - Property
----footer--border-color
Valuevar(----border-color)
Description The border color of the select component footer - Property
----footer--border-style
Valuevar(----border-style)
Description The border style of the select component footer - Property
----footer--border-top-width
Valuevar(----border-top-width)
Description The border top width of the select component footer - Property
----footer--border-right-width
Valuevar(----border-right-width)
Description The border right width of the select component footer - Property
----footer--border-bottom-width
Valuevar(----border-bottom-width)
Description The border bottom width of the select component footer - Property
----footer--border-left-width
Valuevar(----border-left-width)
Description The border left width of the select component footer - Property
----footer--border-width
Valuevar(----footer--border-top-width) var(----footer--border-right-width) var(----footer--border-bottom-width) var(----footer--border-left-width)
Description The border width of the select component footer - Property
----footer--color
Valuevar(----color)
Description The color of the select component footer - Property
----footer--padding-top
Valuecalc(var(----padding-top) * 3 / 4)
Description The padding top of the select component footer - Property
----footer--padding-right
Valuevar(----padding-right)
Description The padding right of the select component footer - Property
----footer--padding-bottom
Valuecalc(var(----padding-bottom) * 3 / 4)
Description The padding bottom of the select component footer - Property
----footer--padding-left
Valuevar(----padding-left)
Description The padding left of the select component footer - Property
----footer--padding
Valuevar(----footer--padding-top) var(----footer--padding-right) var(----footer--padding-bottom) var(----footer--padding-left)
Description The padding of the select component footer