Selection Controls

Components

This section documents the selection controls contained in Tacklebox, and mirrors Vuetify's documentation. Please refer to their documentation if you cannot find what you are looking for here: https://vuetifyjs.com/en/components/selection-controls/

The following components are documented here:

nio-checkbox

nio-radio-group

nio-radio-button

nio-switch

TIP

Vuetify provides an additional component, v-simple-checkbox, which is largely a component implemented internally in various Vuetify components. We have decided not to implement a standalone component in this case, opting to provide a SASS mixin instead which simply applies styles to Vuetify's v-simple-checkbox component. See styles/components for more information

Props

These components preserves all of the props available on their respective Vuetify component. No additional props are supported.

Events

These components preserves all of the events available on their respective Vuetify component. No additional props are supported.

Additionally, they each provide the following event emitters:

@mounted

Emits when the component's mounted lifecycle method is executed

@destroyed

Emits when the component's destroyed lifecycle method is executed

Slots

This component preserves all of the named slots supported by the their respective Vuetify component. Additionally, they each support a generic content slot.

Examples

The following is a simple example of how to use this component in a Vue template:

nio-checkbox

<nio-checkbox v-model="selected" label="select me"></nio-checkbox> 

nio-radio-group

<nio-radio-group v-model="selection">
	<nio-radio-button label="apple" value="apple"></nio-radio-button> 
	<nio-radio-button label="banana" value="banana"></nio-radio-button> 
	<nio-radio-button label="orange" value="orange"></nio-radio-button> 
</nio-radio-group>	

nio-switch

<nio-switch v-model="active" label="module active"></nio-switch> 

Included here are live examples of this component in common configurations. Click below to view them.

Source Code

This component's source code is included for your reference