Select

Select inputs are form components used for providing a collapsible list of options.

Example

Basic Select

Option A

Option B

Option C

Option D

<i-select v-model="value" placeholder="Choose an option">
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

export default {
  data () {
    return {
      value: ''
    };
  }
}

Selected value:

Disabled State

Disabled Select

Option A

Option B

Option C

Option D

<i-select v-model="value" placeholder="Choose an option" disabled>
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

export default {
  data () {
    return {
      value: ''
    };
  }
}

Readonly State

Readonly Select

Option A

Option B

Option C

Option D

<i-select v-model="value" placeholder="Choose an option" readonly>
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

export default {
  data () {
    return {
      value: ''
    };
  }
}

Prefix and Suffix

Inkline allows you to easily add a prefix or suffix to your inputs. Using prefixes and suffixes you can, indicate your input type using an icon or text.

Select Prefix and Suffix

Option A

Option B

Option C

Option D

Option A

Option B

Option C

Option D

@ @

Option A

Option B

Option C

Option D

<i-select v-model="value" placeholder="Choose an option">
    <i slot="prefix">@</i>
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

<i-select v-model="value" placeholder="Choose an option">
    <i slot="suffix">@</i>
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

<i-select v-model="value" placeholder="Choose an option">
    <i slot="prefix">@</i>
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
    <i slot="suffix">@</i>
</i-select>

export default {
  data () {
    return {
      value: ''
    };
  }
}

Sizes

You're able to use the size modifier to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.

Select Sizes

Option A

Option B

Option C

Option D

Option A

Option B

Option C

Option D

Option A

Option B

Option C

Option D

<i-select v-model="value" size="sm" placeholder="Choose an option">
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

<i-select v-model="value" size="md" placeholder="Choose an option">
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

<i-select v-model="value" size="lg" placeholder="Choose an option">
    <i-select-option value="a" label="Option A" />
    <i-select-option value="b" label="Option B" />
    <i-select-option value="c" label="Option C" />
    <i-select-option value="d" label="Option D" disabled />
</i-select>

export default {
  data () {
    return {
      value: ''
    };
  }
}

Component API

Here you can find a list of the various customization options you can use for the select components as props, as well as available slots and events.

Select API

Property disabled

Type Boolean

Accepted true, false

Default false

Description Sets the state of the select form component as disabled.

Property placeholder

Type String

Description Sets the placeholder of the select form component.

Property readonly

Type Boolean

Accepted true, false

Default false

Description Sets the state of the select form component as readonly.

Property schema

Type Object

Description Provides a schema binding to the select form component. See the Form Validation documentation.

Property size

Type String

Accepted sm, md, lg

Default md

Description Sets the size of the select form component.

Property value

Type String

Description Sets the value of the select form component. To be provided using the v-model directive.

Slot default

Description Slot for select default content. To be populated with select option components.

Slot prepend

Description Slot for select prepend content. Prepended content appears before the select inside a button-like container.

Slot append

Description Slot for select append content. Appended content appears after the select inside a button-like container.

Slot prefix

Description Slot for select prefix content. The prefix content appears inside the select field, on the left side.

Slot suffix

Description Slot for select suffix content. The suffix content appears inside the select field, on the right side.

Event click

Type (event: Event) => {}

Description Emitted when select form component is clicked.

Event focus

Type (event: Event) => {}

Description Emitted when select form component is focused.

Event blur

Type (event: Event) => {}

Description Emitted when select form component is blurred.

Event change

Type (value: String) => {}

Description Emitted when select form component value changes.

Event input

Type (value: String) => {}

Description Emitted when select form component value changes.

Event mouseenter

Type (value: String) => {}

Description Emitted when select form component is hovered.

Event mouseleave

Type (value: String) => {}

Description Emitted when select form component is not hovered anymore.

Select Option API

Property disabled

Type Boolean

Accepted true, false

Default false

Description Sets the state of the select form component as disabled.

Property value

Type String

Description Sets the value of the select form component option.

Property label

Type String

Description Sets the text label of the select form component option.

Slot default

Description Slot for select default content. To be populated with select option components.

Sass Variables

Modifying the Input Component and the Dropdown Component Sass Variables will also change the Select component.

Here you can find a list of the Sass variables you can use for the select components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Select

Property $select-dropdown-variants

Default ('monochrome-white')

Property $select-dropdown-variant-color-light

Default $variant-color-light

Property $select-dropdown-variant-color-dark

Default $variant-color-dark

Select Option

Property $select-option-padding

Default $spacer-1-2 * size-multipliers('md') $spacer * size-multipliers('md')