Kryssruta

Använd kryssrutor när det ska vara möjligt att välja ett valfritt antal alternativ i en lista. En ensam kryssruta användas när användaren ska välja om något ska vara på eller av.

Saknar du FCheckboxGroup-komponenten? Den är deprekerad, för detaljer se migreringsguide.

Copy

Texter till kryssrutor ska vara korta och tydliga. Det är viktigt att användaren förstår skillnaden mellan olika alternativ.

Det finns olika sätt att formulera texterna beroende på hur texten i etiketten formuleras. Etiketten kan exempelvis formuleras som en fråga och kryssrutorna som svar. Ett annat sätt är att formulera etiketten som en uppmaning och kryssrutorna som olika alternativ.

Modellvärde i en array

Du kan spara modellvärdet i en array med vilka val som är gjorda. Se koden nedan där colors är en array som ersätter tidigare booleska värden.

 <f-fieldset name="colors">
     <template #label>Färger</template>
-    <f-checkbox-field v-model="red" :value="true">
+    <f-checkbox-field v-model="colors" value="red">
         Röd
     </f-checkbox-field>
-    <f-checkbox-field v-model="green" :value="true">
+    <f-checkbox-field v-model="colors" value="green">
         Grön
     </f-checkbox-field>
 </f-fieldset>

Ensam kryssruta

Om du ska använda en ensam kryssruta ska den fortfarande placeras i en grupp. Däremot ska antalet kryssrutor inte läsas upp.

Komplexa värden

API

FFieldset

Ersätter FCheckboxGroup.

Props

id: string Optional

The id for the fieldset id attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

name: string Optional

Name provided to child content as sharedName for optional usage (it will not be set on the fieldset element). For radio inputs this is a shortcut to specify the shared name attribute at one place, instead of repeatedly setting the name attribute on each radio input.

Default: undefined

labelClass: string Optional

The CSS classes for the label, description and error-message slot.

Default: ""

contentClass: string Optional

The CSS classes for the default slot.

Default: ""

horizontal: boolean Optional

Aligns underlying items horizontally. Supported by radiobuttons and chip layout.

chip: boolean Optional

Displays radio and checkbox content with chip layout.

Default: false

border: boolean Optional

Displays a box with border around radiobuttons and checkboxes.

showDetails: string Optional

Sets visibility behaviour for details slot in selectable child items. By default details slot is not rendered.

  • never (default) - Never show item details.
  • when-selected - Show item details when selected.
  • always - Always show item details.

Default: "never"

Slots

label

Slot for label content. This slot is required.

description

Optional slot for description. See FLabel for details.

Bindings:

  • description-class: string[] CSS classes for primary description content.
  • format-description-class: string[] CSS classes for format description.
error-message

Slot for label content. This slot is required.

Bindings:

  • hasError: boolean Set to true when a validation error is present
  • validationMessage: string Descriptive validation error message for current error
tooltip

Slot for tooltip.

default

Slot for fieldset content.

FCheckboxField

Ersätter FCheckboxGroupField.

Props

disabled: boolean Optional

Set to true, empty string "" or string "disabled" to disable this input field.

Default: false

id: string Optional

The id for the input id attribute. The id for the label for attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

v-model: anyType Optional

The value for the input checked attribute.

value: anyType

The value for the input.

Events

change

Emitted when the value of the checkbox changes.

Arguments:

  • <anonymous>: anyType | anyType[]
update:modelValue

V-model event.

Arguments:

  • <anonymous>: anyType | anyType[]

Slots

default

Slot for label content.

details

Slot for extended label, should only contain short text

Bindings:

  • height: number The height of the expanded details content.

Esc för att stänga Pil upp/ner för att navigera Enter för att välja