Form component used for selecting a value from a large list of options, with autocomplete and pagination support

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, id by default
  • The selected modelValue will be the id of the option

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.


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 prepend and append slots.

Color Variants

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

Size Variants

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.

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



Expressions are strings that can be interpolated using the {{ }} syntax.

Render Function

Render functions are functions that return a string or VNode. They receive the option being rendered as an argument.


You can also use a component to render each option. The component will receive the option being rendered as a prop named ctx (context).

Render Per Option

Each option's label field is a Renderable property. This means you can also use a render function to render each option's label.




Design Tokens