CSS

Customize your vuetify-form-base component using CSS-Classnames

Don't use <style scoped> in parents component, because scoped definitions are inside the child component not accessable

Formbase Default-ID

#form-base is the default ID of your component. If you need different CSS for two or more forms in the same parent component, then change default value by setting a different ID for each component and use this new ID.

<!-- Default ID -->   
<v-form-base @input="handleInput" />  

<style>
    #form-base { background-color:#DDF; }
</style>

Formbase Custom-ID

<!-- Custom ID -->   
<v-form-base id="custom-id" @input="handleInput" />  

<style>
    #custom-id { color:#AAA; }
</style>

Class pointing to Type

Style all items of a specific type, then use type specific classnames. They start with type- appended by your [form-id]- followed by any component[type]. You can use all available types in your schema-object:

<!-- Default ID is 'form-base' -->   
<v-form-base @input="handleInput" />  

.type-form-base-text { color: #44A; }
.type-form-base-email { font-weight:500; }  

// or better 

#form-base .type-form-base-text { color: #44A; }            	  
#form-base .type-form-base-email { font-weight:500; }  

Class pointing to Key

Set class-name of deep key in your model-object, by converting .dot notation 'person.adress.city' into kebab case likeperson-adress-city prepending key- and [form-id]-

<!-- Custom ID-->   
<v-form-base id="formadress" @input="handleInput" />  

<!-- 
	    myModel: { person:{ adress:{ city:'',... } ... } ... } 
  CSS Classname to access to key 'city' in path 'person-adress'
-->
.key-formadress-person-adress-city { font-weight:500; }    


<!-- 
  Access to myModel: { name:'' }
  CSS Classname to access key 'name' 	       
-->
.key-formadress-name { font-weight:500; }            

<!-- 
  myModel: { controls: { slide: [25, 64]  } 
  Access First Entry in Array of Key Slide 
-->
.key-formadress-controls-slide-0 { font-weight:500; }  

Validate with Pseudoselectors

<!-- Custom ID-->   
<v-form-base id="form-id" @input="handleInput" />  

    <!-- Access all items --> 
    .item { background-color: #afa; }
    .item input:valid { background-color: #afa; }
    
    .type-form-id-email input:invalid { background-color: #faa; }
    .key-form-id-name input:focus { background-color: #ffd; }   

CSS Code with Default ID

<!-- Default ID-->   
<v-form-base model="myModel" schema="mySchema" @input="handleInput" /> 

myModel: {
    name: 'Base',
    password: '123456',
    email: '[e-mail]',
    controls: {
      checkbox: true,
      switch: true,
      slider: 33,
      radioA: 'A',
      radioB: 'B'
    }
  }

<style>
  /* INFO-SCOPED: Don't use '<style scoped>' because scoped CSS is inside a child-component not accessable */

  /* CSS Component */
  #form-base { background-color: #fff9e6; }
  
  /* CSS Item --- set all items  */
  #form-base .item { padding:0.5rem; border: 1px dotted #eedf9b}

  /* CSS Type --- set all items of type ... */
  #form-base .type-form-base-switch { border-bottom: 3px solid #E23}
  #form-base .type-form-base-checkbox { background-color: #fdd }

   /* CSS Prop -- set all nested parts of property*/
  #form-base .prop-controls { background-color: #fcf2d2e0; border:1px solid #f0dc9a }

  /* CSS Keys --- set item with key */
  #form-base .key-form-base-name input { background-color: #cad7f077; color:#103c8f77 }
  #form-base .key-form-base-name input:focus { background-color: #1949a1b9; color:#FFF }  
</style>

Example