# Form

<div class="app">
  <v-form>
    <v-input class="mb-5" placeholder="Navn"></v-input>
    <v-input class="mb-5" placeholder="E-mail"></v-input>
    <v-textarea class="mb-5" placeholder="Textarea eksempel"></v-textarea>
    <v-select class="mb-5" placeholder="Dropdown eksempel">
      <v-option>Valgmulighed 1</v-option>
      <v-option>Valgmulighed 2</v-option>
      <v-option>Valgmulighed 3</v-option>
      <v-option>Valgmulighed 4</v-option>
      <v-option>Valgmulighed 5</v-option>
    </v-select>
    <div class="mb-5">
      <v-checkbox class="mb-3" placeholder="Checkbox eksempel" checked></v-checkbox>
      <v-checkbox class="mb-3" placeholder="Checkbox eksempel"></v-checkbox>
      <v-checkbox placeholder="Checkbox eksempel" checked disabled></v-checkbox>
    </div>
    <div class="mb-5">
      <v-radio name="radio" class="mb-3" placeholder="Radio eksempel"></v-radio>
      <v-radio name="radio" class="mb-3" placeholder="Radio eksempel"></v-radio>
      <v-radio name="radio" placeholder="Radio eksempel" disabled checked></v-radio>
    </div>
  </v-form>
</div>

<div class="app">
  <v-form>
    <v-input class="mb-5" placeholder="Field with description" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></v-input>
    <v-input placeholder="Field with error" value="Consectetur adipiscing" error="Lorem ipsum dolor sit amet"></v-input>
  </v-form>
</div>

<div class="app">
  <v-data v-slot="state" :data="{ name: 'John Doe', permission: true, gender: 'male' }">
    <v-form>
      <v-input class="mb-5" placeholder="Enter name" :value="state.name" @input="state.name = $event.target.value"></v-input>
      <v-checkbox class="mb-5" placeholder="Permission" :checked="state.permission === true" @input="state.permission = $event.target.checked"></v-checkbox>
      <div class="mb-5">
        <v-radio class="mb-3" placeholder="Male" :checked="state.gender === 'male'" @input="state.gender = 'male'"></v-radio>
        <v-radio placeholder="Female" :checked="state.gender === 'female'" @input="state.gender = 'female'"></v-radio>
      </div>
      <pre style="color: #fff;">{{JSON.stringify(state, null, 2)}}</pre>
      <v-card class="mt-5">
        <div v-if="state.gender === 'male'">You have chosen 'Male' 👨</div>
        <div v-if="state.gender === 'female'">You have chosen 'Female' 👩</div>
      </v-card>
    </v-form>
  </v-data>
</div>