Select
Model-value
Represents the selected value of the select component.
One
One
Two
<script setup lang="ts">
import { NmorphSelect } from "@nmorph/nmorph-ui-kit";
const value = ref("one");
const options = ref([
{ value: "one", label: "One" },
{ value: "two", label: "Two" },
{ value: "three", label: "Three" },
]);
const multipleValue = ref(["one", "two"]);
</script><template>
<div class="select-model-value-overview">
<div class="select-element">
<NmorphSelect v-model="value" :options="options" />
</div>
<div class="select-element">
<NmorphSelect
v-model="multipleValue"
:options="options"
no-element-placeholder="Multiple values"
/>
</div>
</div>
</template>Thickness
Sets the thickness of the dropdown list.
Choose value
Choose value
Choose value
<script setup lang="ts">
import { NmorphSelect, NmorphComponentThickness } from "@nmorph/nmorph-ui-kit";
const options = ref([
{ value: "one", label: "One" },
{ value: "two", label: "Two" },
{ value: "three", label: "Three" },
]);
const thicknesses = Object.keys(NmorphComponentThickness) as Array<
keyof typeof NmorphComponentThickness
>;
</script><template>
<div class="select-thickness-overview">
<NmorphSelect
v-for="thickness in thicknesses"
:key="thickness"
:thickness="thickness"
:options="options"
/>
</div>
</template>Disabled
Disables the component.
Choose value
<script setup lang="ts">
import { NmorphSelect } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="select-disabled-overview">
<NmorphSelect disabled />
</div>
</template>Loading
Displays a loading indicator if set to true.
Choose value
<script setup lang="ts">
import { NmorphSelect } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="select-loading-overview">
<NmorphSelect loading />
</div>
</template>Fill
Makes the select occupy the full width of its container.
Review
<script setup lang="ts">
import { NmorphSelect } from "@nmorph/nmorph-ui-kit";
const value = ref("review");
const options = [
{ value: "draft", label: "Draft" },
{ value: "review", label: "Review" },
{ value: "published", label: "Published" },
];
</script><template>
<div class="select-fill-overview">
<NmorphSelect v-model="value" :options="options" fill />
</div>
</template>Options width
Controls whether dropdown options keep the select width and truncate long labels or expand to fit content.
Microsoft Teams Audio Device (Virtual)
Microsoft Teams Audio Device (Virtual)
<script setup lang="ts">
import { NmorphSelect } from "@nmorph/nmorph-ui-kit";
const value = ref("teams");
const options = [
{ value: "teams", label: "Microsoft Teams Audio Device (Virtual)" },
{ value: "microphone", label: "MacBook Pro Microphone (Built-in)" },
{ value: "thunderbolt", label: "Universal Audio Thunderbolt (PCI)" },
];
</script><template>
<div class="select-options-width-overview">
<NmorphSelect v-model="value" :options="options" />
<NmorphSelect v-model="value" :options="options" options-width="auto" />
</div>
</template>NmorphSelect Api
Attributes
Slots
Events
Translations i18n
Use these keys to configure custom text for languages that the library does not support out of the box.