Pseudo-Classes/Elements

VBox supports styling elements based on their state using pseudo-class props. You can apply styles for various states such as hover, focus, active, and disabled by using the corresponding pseudo-class props.

hover

You can use the hover prop to apply styles when the element is hovered over.

<template>
  <v-box
    w="250px"
    bg="tomato"
    p="1rem"
    color="white"
    position="relative"
    transition="transform 0.2s ease-in-out, background-color 0.2s ease-in-out"
    :hover="{
      transform: 'translateY(-2px)',
      backgroundColor: 'indigo',
    }"
  >
    Hover on this box
  </v-box>
</template>

Hover on this box

focus

You can use the focus prop to apply styles when the element is focused.

<template>
  <v-box
    is="button"
    color="white"
    background-color="indigo"
    padding="0.5rem 1rem"
    :focus="{
      outline: '2px solid tomato',
      outlineOffset: '4px',
    }"
  >
    Keep pressing tab until I receive focus
  </v-box>
</template>

focusVisible

You can use the focusVisible prop to apply styles when the element is focused and the focus is visible (typically when navigating via keyboard).

<template>
  <v-box
    is="button"
    color="white"
    background-color="indigo"
    padding="0.5rem 1rem"
    :focus-visible="{
      outline: '2px solid tomato',
      outlineOffset: '4px',
    }"
  >
    Keep pressing tab until i receive focus
  </v-box>
</template>

focusWithin

You can use the focusWithin prop to apply styles when the element or any of its descendants are focused.

<template>
  <v-box
    :focus-within="{
      outline: '2px solid tomato',
      outlineOffset: '4px',
    }"
  >
    <p>Focus on the input</p>

    <v-box is="input" border="1px solid indigo" />
  </v-box>
</template>

Focus on the input

active

You can use the active prop to apply styles when the element is in an active state (e.g., being clicked).

<template>
  <v-box
    is="a"
    href="https://google.com"
    target="_blank"
    :active="{
      color: 'red !important',
    }"
    >Press this link for long
  </v-box>
</template>

Press this link for long

_disabled

You can use the _disabled prop to apply styles when the element is disabled. The prop is prefixed with an underscore to avoid conflicts with the native disabled attribute.

<template>
  <v-box
    is="button"
    disabled
    :_disabled="{
      cursor: 'not-allowed',
      opacity: 0.7,
    }"
    >A disabled button</v-box
  >
</template>

pseudos

What about other pseudo-classes or pseudo-elements? Well, you can define any valid pseudo-class or pseudo-element styles inside the pseudos prop ✨

<template>
  <v-box
    is="label"
    position="relative"
    :pseudos="{
      '::after': {
        position: 'absolute',
        content: '*',
        color: 'tomato',
        top: 0,
        right: '-12px',
        fontSize: '1.5rem',
      },
    }"
  >
    Enter your username
  </v-box>
</template>

Enter your username

---

TIP

You can define valid CSS selectors inside any of the pseudo class props discussed above

<template>
  <!-- on hover, change the color of the next sibling -->
  <v-box
    is="span"
    :hover="{
      '& + [data-scope=sibling]': {
        color: 'tomato',
      },
    }"
  >
    Hover on me
  </v-box>

  <p data-scope="sibling">Next sibling</p>
</template>

Hover on me

Next sibling