Grouping form elements in Quasar

Explain styling needed to group form elements in Quasar in order to make them look like a single element.

quasarcss

by

PDan

November 20, 2023

Problem description

You need to group two Quasar form components together (most frequently a QInput and a QSelect).

Solution

First you combine the components, and then you need some CSS to make it look good. It works both for LTR and RTL languages.

WARNING

Take care not to mix dense and not dense components.

html

<q-input class="q-field--grouped-before" v-model="text" outlined dense>
  <template #before>
    <q-select
      v-model="select"
      outlined
      dense
      :options="options"
    />
  </template>

  <template #append>
    <q-icon name='search' />
  </template>
</q-input>

<q-input class="q-field--grouped-after" v-model="text" outlined>
  <template #after>
    <q-select
      v-model="select"
      outlined
      :options="options"
    />
  </template>

  <template #prepend>
    <q-icon name='search' />
  </template>
</q-input>

sass

.q-field
  &.q-field--grouped-before
    > .q-field__before
      padding-inline-end: 0

      > .q-field--outlined
        margin-inline-end: -1px

      > .q-field--outlined,
      > .q-field--filled
        .q-field__inner > .q-field__control
          border-start-end-radius: 0
          border-end-end-radius: 0

      > .q-field--filled,
      > .q-field--standard
        .q-field__inner > .q-field__control:after
          transform-origin: right bottom

    > .q-field__inner > .q-field__control
      border-start-start-radius: 0
      border-end-start-radius: 0

    &.q-field--outlined > .q-field__inner > .q-field__control
      margin-inline-start: -1px

      &:not(:hover):before
        border-inline-start-color: transparent

    &.q-field--filled,
    &.q-field--standard
      > .q-field__inner > .q-field__control:after
        transform-origin: left bottom

  &.q-field--grouped-after
    > .q-field__after
      padding-inline-start: 0

      > .q-field.q-field--outlined
        margin-inline-start: -1px

      > .q-field--outlined,
      > .q-field--filled
        .q-field__inner > .q-field__control
          border-start-start-radius: 0
          border-end-start-radius: 0

      > .q-field--filled,
      > .q-field--standard
        .q-field__inner > .q-field__control:after
          transform-origin: left bottom

    > .q-field__inner > .q-field__control
      border-start-end-radius: 0
      border-end-end-radius: 0

    &.q-field--outlined > .q-field__inner > .q-field__control
      margin-inline-end: -1px

      &:not(:hover):before
        border-inline-end-color: transparent

    &.q-field--filled,
    &.q-field--standard
      > .q-field__inner > .q-field__control:after
        transform-origin: right bottom

    &.q-field--grouped-before
      > .q-field__after > .q-field.q-field--outlined
        margin-inline-start: -3px

      &.q-field--filled,
      &.q-field--standard
        > .q-field__inner > .q-field__control:after
          transform-origin: center bottom
          transition-delay: 0.26s

      &.q-field--highlighted
        &.q-field--filled,
        &.q-field--standard
          > .q-field__inner > .q-field__control:after
            transition-delay: 0s

        > .q-field__before > .q-field,
        > .q-field__after > .q-field
          &.q-field--filled,
          &.q-field--standard
            > .q-field__inner > .q-field__control:after
              transition-delay: .26s

Demo

The Vue REPL does not support processing SASS syntax yet, so the styles are converted to CSS.