Select
Select inputs are form components used for providing a collapsible list of options.
Example
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
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.
@
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
.
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. |