VInputCheckbox

The VInputCheckbox component is a checkbox input element that can be used within a form.

My checkbox

<VInputCheckbox v-model="radio" name="checkbox" label="My checkbox" />
/>

Bottom section

The VInputCheckbox contain a bottom section that add the content of description prop or content from the bottom slot.

Here an example using the description prop

My checkbox

Click on me

<VInputCheckbox v-model="radio" name="checkbox" label="My checkbox" description="Click on me" />

Here an example using the bottom slot

My checkbox

Bottom slot 😎

<VInputCheckbox v-model="radio" name="radcheckboxio" label="My checkbox">
  <template #bottom>
      Bottom slot 😎
  </template>
</VInputRadio>

Preset customization

The VInputCheckbox preset configuration interface extends the DefaultConfig interface, which is explained in detail here.

InputCheckboxConfig

export interface InputCheckboxConfig extends DefaultConfig {
  // Wrapper for <input> and <label>
  wrapper: {
    class: MethodOrStringType, // style classes of wrapper
    input: {
      class: MethodOrStringType, // style classes of input element
      variants?: VariantsConfig, // Contain all variants key / value
      variant?: MethodOrStringType,
      sizes?: MethodOrObject, // Contain all sizes key / value
      size?: MethodOrStringType,
    },
    // Checked icon applied on checkbox
    checked: {
      icon?: IconType,
      class: MethodOrStringType,
      sizes?: MethodOrObject,
      size?: MethodOrStringType,
    },
    // Indeterminate icon applied on checkbox
    indeterminate: {
      icon?: IconType,
      class: MethodOrStringType,
      sizes?: MethodOrObject,
      size?: MethodOrStringType,
    },
    label: {
      class: MethodOrStringType // style classes of label
    },
  }
  // Buttom content of InputRadio
  bottom: {
    class: MethodOrStringType // style classes of bottom
  }
}

Here the exemple from the default InputCheckbox.config.ts vunix preset which is built on top of Tailwind CSS.

InputCheckbox.config.ts

const config = {
  class: 'flex flex-col',
  wrapper: {
    class: 'flex items-center font-medium relative',
    input: {
      class: 'grid place-content-center appearance-none shrink-0 peer',
      variants: {
        default: `min-h-[10px] min-w-[10px] w-5 h-5 focus:outline-none border-[1.5px] rounded-md border-gray-300 dark:border-white checked:bg-blue-600 dark:checked:border-blue-600 checked:border-blue-600 checked:focus:outline-offset-0 checked:focus:outline-2 checked:focus:outline-blue-400 focus:border-blue-400`,
      }
    },
    checked: {
      class: 'absolute hidden text-white left-[2px] peer-checked:inline-flex',
      icon: 'heroicons-solid:check',
      size: '16px'
    },
    indeterminate: {
      class: 'absolute hidden bg-blue-600 rounded w-3 h-3 left-[4px] peer-indeterminate:inline-flex',
    },
    label: {
      class: 'pl-2 text-gray-900 dark:text-gray-100 text-sm ',
    }
  },
  bottom: {
    class: 'text-gray-500 dark:text-gray-400 ml-7 text-xs'
  }
} as InputCheckboxConfig;

Edit this page on GitHub

FormVInputGroupRadio

FormVInputRadio