Inkline
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">
<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: ''
};
}
}
API
Select API
<i-select> | Property | Description | Type | Accepted | Default |
|---|---|---|---|---|
| disabled | Sets the state of the select form component as disabled. | Boolean | true, false | false |
| placeholder | Sets the placeholder of the select form component. | String | ||
| readonly | Sets the state of the select form component as readonly. | Boolean | true, false | false |
| schema | Provides a schema binding to the select form component. See the Form Validation documentation. | Object | ||
| size | Sets the size of the select form component. | String | sm, md, lg | md |
| value | Sets the value of the select form component. To be provided using the v-model directive. | String |
| Name | Description |
|---|---|
| default | Slot for select default content. To be populated with select option components. |
| prepend | Slot for select prepend content. Prepended content appears before the select inside a button-like container. |
| append | Slot for select append content. Appended content appears after the select inside a button-like container. |
| prefix | Slot for select prefix content. The prefix content appears inside the select field, on the left side. |
| suffix | Slot for select suffix content. The suffix content appears inside the select field, on the right side. |
| Name | Description | Prototype |
|---|---|---|
| click | Emitted when select form component is clicked. | (event: Event) => {} |
| focus | Emitted when select form component is focused. | (event: Event) => {} |
| blur | Emitted when select form component is blurred. | (event: Event) => {} |
| change | Emitted when select form component value changes. | (value: String) => {} |
| input | Emitted when select form component value changes. | (value: String) => {} |
| mouseenter | Emitted when select form component is hovered. | (value: String) => {} |
| mouseleave | Emitted when select form component is not hovered anymore. | (value: String) => {} |
Select Option API
<i-select-option> | Property | Description | Type | Accepted | Default |
|---|---|---|---|---|
| disabled | Sets the state of the select form component as disabled. | Boolean | true, false | false |
| value | Sets the value of the select form component option. | String | ||
| label | Sets the text label of the select form component option. | String |
| Name | Description |
|---|---|
| default | Slot for select default content. To be populated with select option components. |