quasar

{ "type": "component", "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/option-group" }, "props": { "size": { "type": "String", "desc": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)", "examples": [ "16px", "2rem", "xs", "md" ], "category": "style" }, "model-value": { "desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive", "required": true, "syncable": true, "category": "model", "type": "Any", "examples": [ "v-model=\"group\"" ] }, "options": { "type": "Array", "desc": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly", "definition": { "label": { "type": "String", "desc": "Label to display along the component", "required": true, "examples": [ "Option 1", "Option 2", "Option 3" ] }, "value": { "type": "Any", "desc": "Value of the option that will be used by the component model", "required": true, "examples": [ "op1", "op2", "op3" ] }, "disable": { "type": "Boolean", "desc": "If true, the option will be disabled" }, "...props": { "type": "Any", "desc": "Any other props from QToggle, QCheckbox, or QRadio", "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ] } }, "examples": [ ":options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]\"" ], "category": "model" }, "name": { "type": "String", "desc": "Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL", "examples": [ "car_id" ], "category": "behavior" }, "type": { "type": "String", "desc": "The type of input component to be used", "values": [ "radio", "checkbox", "toggle" ], "default": "radio", "category": "content", "required": false }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "keep-color": { "type": "Boolean", "desc": "Should the color (if specified any) be kept when input components are unticked?", "category": "behavior" }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color", "category": "style" }, "dense": { "type": "Boolean", "desc": "Dense mode; occupies less space", "category": "style" }, "left-label": { "type": "Boolean", "desc": "Label (if any specified) should be displayed on the left side of the input components", "category": "content" }, "inline": { "type": "Boolean", "desc": "Show input components as inline-block rather than each having their own row", "category": "content" }, "disable": { "type": "Boolean", "desc": "Put component in disabled mode", "category": "state" } }, "slots": { "label": { "desc": "Generic slot for all labels", "scope": { "...self": { "type": "Object", "desc": "The corresponding option entry from the 'options' prop", "definition": { "label": { "type": "String", "desc": "Label to display along the component", "required": true, "examples": [ "Option 1", "Option 2", "Option 3" ] }, "value": { "type": "Any", "desc": "Value of the option that will be used by the component model", "required": true, "examples": [ "op1", "op2", "op3" ] }, "disable": { "type": "Boolean", "desc": "If true, the option will be disabled" }, "...props": { "type": "Any", "desc": "Any other props from QToggle, QCheckbox, or QRadio", "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ] } } } }, "addedIn": "v2.2" }, "label-[name]": { "desc": "Slot to define the specific label for the option at '[name]' where name is a 0-based index; Overrides the generic 'label' slot if used", "scope": { "...self": { "type": "Object", "desc": "The corresponding option entry from the 'options' prop", "definition": { "label": { "type": "String", "desc": "Label to display along the component", "required": true, "examples": [ "Option 1", "Option 2", "Option 3" ] }, "value": { "type": "Any", "desc": "Value of the option that will be used by the component model", "required": true, "examples": [ "op1", "op2", "op3" ] }, "disable": { "type": "Boolean", "desc": "If true, the option will be disabled" }, "...props": { "type": "Any", "desc": "Any other props from QToggle, QCheckbox, or QRadio", "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ] } } } }, "addedIn": "v2.2" } }, "events": { "update:model-value": { "desc": "Emitted when the component needs to change the model; Is also used by v-model", "params": { "value": { "type": "Any", "desc": "New model value", "required": true } } } } }