Select
Features:
- Color
- Size
- Value binding
Usage
vue
<script setup>
import { Select } from 'gurunkit';
</script>
<template>
<Select :options="['Option 1', 'Option 2', 'Option 3']" />
</template>Options
Set options using options props.
Options should be an array of primitive value. Each value used for the text and value for each option.
Or an array of object { id: '', name: '' }. id used for the value, name used for the text.
vue
<script setup>
import { Select } from 'gurunkit';
</script>
<template>
<Select :options="['Option 1', 'Option 2', 'Option 3']" />
<Select
:options="[
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' },
]"
/>
</template>Color
Set select color using color props. Supported values: primary, light, error, warning, success.
It's also supports dark mode, enable it by adding dark class to html tag.
vue
<script setup>
import { Select } from 'gurunkit';
</script>
<template>
<Select color="primary" />
<Select color="warning" />
<Select color="error" />
<Select color="light" />
<Select color="success" />
</template>Size
Set select size using size props. Supported values: sm, md, lg.
vue
<script setup>
import { Select } from 'gurunkit';
</script>
<template>
<Select size="sm" :options="['Small']" />
<Select size="md" :options="['Medium']" />
<Select size="lg" :options="['Large']" />
</template>Custom Class
Add custom class using class attribute.
vue
<script setup>
import { Select } from 'gurunkit';
</script>
<template>
<Select class="w-full" />
</template>V-Model
Bind a value using v-model.
vue
<script setup>
import { Select } from 'gurunkit';
import { ref } from 'vue';
const selected = ref('javascript');
</script>
<template>
<Select :options="['javascript', 'php', 'c++']" v-model="selected" />
</template>Selected: javascript
HTML Attributes and Events
HTML attributes and events are automatically inherited.
vue
<script setup>
import { Select } from 'gurunkit';
const onChange = () => alert('test');
</script>
<template>
<Select required :options="[1, 2, 3]" @change="onChange" />
</template>API
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
options | any[] or {id,name}[] | ❌ | [] | Select options |
color | primary, light, success, warning, error | ❌ | primary | Select color |
size | sm, md, lg | ❌ | md | Select size |
| All HTML attributes | - | ❌ | - | HTML attributes |
Events
| Name | Type | Description |
|---|---|---|
| All HTML events | - | HTML events |
Model Value
| Name | Type | Description |
|---|---|---|
default | string | Bind a value |