<c-select>
Examples
<template>
<div>
<c-select
v-model="country"
clearable
hint="The list opens on click or with the arrow keys"
label="Country"
placeholder="Choose a country"
>
<c-option name="Finland" value="fi">Finland</c-option>
<c-option name="Sweden" value="se">Sweden</c-option>
<c-option name="Norway" value="no">Norway</c-option>
<c-option name="Denmark" value="dk">Denmark</c-option>
</c-select>
<p>Value: {{ country ?? 'null' }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const country = ref<string | null>(null);
</script>
<template>
<div>
<c-select v-model="country" label="Country" size="small">
<c-option name="Finland" value="fi">Finland</c-option>
<c-option name="Sweden" value="se">Sweden</c-option>
<c-option name="Norway" value="no">Norway</c-option>
</c-select>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const country = ref<string | null>('fi');
</script>
<template>
<div>
<c-select
v-model="country"
clearable
hint="Each c-option provides a name and a value"
label="Country"
placeholder="Choose a country"
>
<c-option name="Finland" value="fi">Finland</c-option>
<c-option name="Sweden" value="se">Sweden</c-option>
<c-option name="Norway" value="no">Norway</c-option>
<c-option name="Denmark" value="dk" disabled>Denmark</c-option>
</c-select>
<p>Value: {{ country ?? 'null' }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const country = ref<string | null>(null);
</script>
API reference
<c-select>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
clearable | clearable | boolean | false | Make the selected value clearable |
disabled | disabled | boolean | false | Disable the input |
errorMessage | error-message | string | '' | Error message shown in place of the hint while the select is invalid |
hideDetails | hide-details | boolean | false | Hide the hint and error messages |
hint | hint | string | '' | Hint text for the input |
hostId | host-id | string | '' | Id of the element |
items | — | | () => [] | Dropdown items (when not using <c-option> elements) |
itemsPerPage | items-per-page | number | 6 | Items per page before adding scroll |
label | label | string | '' | Element label |
labelOnTop | label-on-top | boolean | false | Label on top of the input |
loading | loading | boolean | false | Show loading state |
name | name | string | '' | Input field name |
optionAsSelection | option-as-selection | boolean | false | Display the option as selection (only with <c-option> elements) |
placeholder | placeholder | string | '' | Placeholder text |
required | required | boolean | false | Set the select as required |
returnObject | return-object | boolean | false | Return object instead of value |
shadow | shadow | boolean | false | Shadow variant |
size | size | CFieldSize | 'default' | Field height: the 44px default or the 36px `small` box |
valid | valid | boolean | true | Set the validity of the input |
value | value | | null | Selected value (scalar, or object when return-object is set) |
Events
| Event | Detail | Description |
|---|---|---|
changeValue | CSelectItem | null | number | string | Fired when the selection changes (an option is picked or the value is cleared), carrying the new value — the option's value, or the whole `{ name, value }` item when `return-object` is set; `null` when cleared. Also dispatched as `change-value` — bind that name in Vue templates. |
input | void | Native bubbling input event dispatched alongside every value change so a plain `v-model` stays in sync. Carries no detail. |
update:value | CSelectItem | null | number | string | Fired alongside `changeValue` with the same detail — the `v-model` contract. |
Methods
| Method | Signature | Description |
|---|---|---|
reset | () | Reset select state |
Slots
| Slot | Description |
|---|---|
default | Use c-option elements only |
pre | Leading content forwarded to the inner c-input, rendered before the select's value |
post | Trailing content forwarded to the inner c-input, rendered after the select's controls |
CSS parts
Style from outside with c-select::part(name) — parts are the library's only styling customization API.
| Part | Description |
|---|---|
menu | The dropdown surface (the positioned dialog) holding the field and the list |
list | The scrolling listbox of options |
item | One option row in the list. Any `part` attribute set on content inside a slotted `<c-option>` is exported too, so `c-select::part(<name>)` reaches the consumer's own option markup |
Types
Importable from the package root: import type { … } from '@cscfi/csc-ui'
CFieldSize shared
Field height of the form controls built on `c-input`. `default` is the 44px field; `small` is the 36px field. Owned here because the value passes from the wrapping control (`c-select`) into `c-input`.
export type CFieldSize = 'default' | 'small';CSelectItem shared
A selectable item for the value-selection components (`c-select`, `c-autocomplete`) when options are supplied via the `items` prop instead of slotted `<c-option>` elements.
export interface CSelectItem {
/** Disable the item so it cannot be selected. */
disabled?: boolean;
/** The item's display label. */
name: string;
/** The value emitted via v-model when the item is selected. */
value: number | string;
}<c-option>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | Set option as disabled |
name | name | string | — | Option name (display label fallback) |
selected | selected | boolean | false | Set option as selected |
value | value | number | string | — | Option value |
Slots
| Slot | Description |
|---|---|
default | The option's visible label content, shown in the c-select dropdown list |