oa/documentation/elements/forms/textarea/textarea-focus-documentation.md

state

state
textarea

Focus Colors

Like other form controls, VTextarea can have different border colors when focused. Simply add the appropriate color modifier class. Available classes are is-primary-focus, is-success-focus, is-info-focus, is-warning-focus, is-danger-focus.

<script setup lang="ts">

const textarea = ref('')
</script>

<template>
  <!-- is-primary-focus -->
  <VField>
    <VControl>
      <VTextarea
        v-model="textarea"
        class="is-primary-focus"
        rows="2"
        placeholder="Primary..."
      />
    </VControl>
  </VField>

  <!-- is-success-focus -->
  <VField>
    <VControl>
      <VTextarea
        v-model="textarea"
        class="is-success-focus"
        rows="2"
        placeholder="Success..."
      />
    </VControl>
  </VField>

  <!-- is-info-focus -->
  <VField>
    <VControl>
      <VTextarea
        v-model="textarea"
        class="textarea is-info-focus"
        rows="2"
        placeholder="Info..."
      />
    </VControl>
  </VField>

  <!-- is-warning-focus -->
  <VField>
    <VControl>
      <VTextarea
        v-model="textarea"
        class="textarea is-warning-focus"
        rows="2"
        placeholder="Warning..."
      />
    </VControl>
  </VField>

  <!-- is-danger-focus -->
  <VField>
    <VControl>
      <VTextarea
        v-model="textarea"
        class="textarea is-danger-focus"
        rows="2"
        placeholder="Danger..."
      />
    </VControl>
  </VField>
</template>