Komponent

FSelectField

Status

Produktionsklar

Använd dropplista när användaren ska välja ett av flera liknande, fördefinierade alternativ. En dropplista måste ha minst två alternativ men används oftast då det finns fyra val eller fler.

Dropplista har alltid en etikett som beskriver vad användaren ska fylla i.

Copy

I dropplistor är det vanligt att etiketten är formulerad som en fråga eller ett påstående.

Texten i själva dropplistan formuleras så att det blir tydligt vad användaren ska fylla i, men får inte ensam beskriva valet då den försvinner när användaren gjort ett val.

Responsiv bredd

Etiketten och dropplistan kan ha olika bredd. När etikettens text radbryts behöver alltså inte vara kopplat till hur bred dropplistan i sig är.

Bredden för respektive del anges med antal kolumner vid olika skärmbredder (brytpunkter).

<template>
    <f-select-field v-model="foo" v-validation.required label-width="md-9" select-width="md-6">
        <template #label>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque lacus sed mi
            mollis pulvinar.
        </template>

        <option disabled hidden value="">Välj…</option>
        <option value="FOO">Foo</option>
        <option value="BAR">Bar</option>
        <option value="BAZ">Baz</option>
    </f-select-field>
</template>

<script>
import { defineComponent } from "vue";
import { FSelectField } from "@fkui/vue";

export default defineComponent({
    name: "FSelectFieldWidths",
    components: { FSelectField },
    data() {
        return { foo: "" };
    },
});
</script>

API

label-width="md-9 lg-6"

select-width="md-6 lg-3"