Radioknapp

Innehåll

Använd radioknappar för att låta en användare välja ett alternativ i en lista.

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

Radioknappar vs Dropplista

En dropplista bör användas om antalet alternativ är relativt stort eller är om antalet är dynamiskt och därmed kan öka i antal .

Ersätter FRadioGroup.

Props
Name	Description	Type	Required	Default
id	The id for the fieldset id attribute. If the prop is not set a random value will be generated.	string	false	() => ElementIdService.generateElementId()
name	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.	string	false	undefined
labelClass	The CSS classes for the label, description and error-message slot.	string	false	""
contentClass	The CSS classes for the default slot.	string	false	""
horizontal	Aligns underlying items horizontally. Supported by radiobuttons and chip layout.	boolean	false	‐
chip	Displays radio and checkbox content with chip layout.	boolean	false	false
border	Displays a box with border around radiobuttons and checkboxes.	boolean	false	‐
showDetails	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.	string	false	"never"

Slots
Name	Description	Bindings
label	Slot for label content. This slot is required.	‐
description	Optional slot for description. See FLabel for details.	descriptionClass discreteDescriptionClass
error-message	Slot for displaying single or several error messages.	hasError validationMessage
tooltip	Slot for tooltip.	‐
default	Slot for fieldset content.	‐

Ersätter FRadioGroupField.

Props
Name	Description	Type	Required	Default
disabled	Set to `true`, empty string `""` or string `"disabled"` to disable this input field.	boolean	false	false
id	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.	string	false	() => ElementIdService.generateElementId()
v-model	The value for the input checked attribute.	anyType	false	‐
value	The value for the input.	anyType	true	‐

Events
Name	Description	Properties
change	Vue2 v-model event.	<anonymous>: anyType
update:modelValue	V-model event.	<anonymous>: anyType

Slots
Name	Description	Bindings
default	Slot for label content.	‐
details	Slot for details, should only contain short text	height