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

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
/>

Disabled State

Setting the disabled property will disable all interactions with the select component.

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    disabled
/>

You can also disable individual options by setting the option’s disabled field to true.

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
/>

Readonly State

Setting the readonly property will disable all interactions with the select component, except being able to focus the select.

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    readonly
/>

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.

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    clearable
/>

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.

<i-select
    v-model="selected"
    :options="options"
    label="name"
    placeholder="Choose something.."
>
    <template #prefix>
        <span>@</span>
    </template>
</i-select>

<i-select
    v-model="selected"
    :options="options"
    label="name"
    placeholder="Choose something.."
>
    <template #suffix>
        <span>@</span>
    </template>
</i-select>

<i-select
    v-model="selected"
    :options="options"
    label="name"
    placeholder="Choose something.."
>
    <template #prefix>
        <span>@</span>
    </template>
    <template #suffix>
        <span>@</span>
    </template>
</i-select>

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.

<i-select
    v-model="selected"
    :options="options"
    label="name"
    placeholder="Choose something.."
>
    <template #prepend>
        <span>I choose</span>
    </template>
</i-select>

<i-select
    v-model="selected"
    :options="options"
    label="name"
    placeholder="Choose something.."
>
    <template #append>
        <span>as an example</span>
    </template>
</i-select>

<i-select
    v-model="selected"
    :options="options"
    label="name"
    placeholder="Choose something.."
>
    <template #prepend>
        <span>I choose</span>
    </template>
    <template #append>
        <span>as an example</span>
    </template>
</i-select>



<i-input v-model="value" placeholder="Type something..">
    <template #prepend>
        <i-button>Button</i-button>
    </template>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <template #append>
        <i-button>Button</i-button>
    </template>
</i-input>

<i-input v-model="value" placeholder="Type something..">
    <template #prepend>
        <i-button>Button</i-button>
    </template>
    <template #append>
        <i-button>Button</i-button>
    </template>
</i-input>

Colors

You can use the color property to set a light or dark color for your select.

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    color="light"
/>

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    color="dark"
/>

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.

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    size="sm"
/>

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    size="md"
/>

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
    size="lg"
/>

You can provide a custom header and footer for the select menu using the header and footer slots.

<i-select
    v-model="selected"
    :options="options"
    placeholder="Choose something.."
>
    <template #header>
        Header
    </template>
    <template #footer>
        Footer
    </template>
</i-select>

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.

<i-select
    v-model="selected"
    placeholder="Choose something.."
>
    <i-select-option value="1" label="Richard Hendricks" />
    <i-select-option value="2" label="Bertram Gilfoyle" />
    <i-select-option value="3" label="Dinesh Chugtai" />
    <i-select-option value="4" label="Jared Dunn" />
    <i-select-option value="5" label="Erlich Bachman" disabled />
</i-select>

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