quasar/dist/api/QOptionGroup.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"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":["[ { 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","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'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","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"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}}}}}