Radunia components

QInput component

QInput is kept as simple as possible to allow for a variety of use cases. It defaults to 100% width and uses some basic aria attributes, including error handling.

HTML input types

An extensive list of HTML5 input elements can be found at the end of this page

Requirements

TypePath / VersionPurposeOptional
Styles../../assets/main.cssCSS VariablesNo
Functions../../use/uuidAssign ids to itemsNo
Components../../components/Layout/Flex/QFlexContainerFull form exampleYes
Components../../components/Layout/Flex/QFlexColumnFull form exampleYes
Components../../components/Form/QInput.vueFull form exampleYes
Components../../components/Form/QButton.vueFull form exampleYes

Usage

Import the following component/s:

import QInput from '../../components/Form/QInput.vue'
import QSelect from '../../components/Form/QSelect.vue';
import QButton from '../../components/Form/QButton.vue'
import QInputGroup from '../../components/Form/QInputGroup.vue'
import QFlexContainer from "../../components/Layout/Flex/QFlexContainer.vue"
import QFlexColumn from "../../components/Layout/Flex/QFlexColumn.vue"

Basic usage

QInputGroup provides a wrapper for input elements using the <legend> - tag.

The following example also requires the QFlexColumn component from the /Layout/Flex library and QButton

Personal information

Full component's code

QInputGroup

<template>
  <fieldset class="q-input-group" :class="{
    'q-input-group-border': border,
  }">
    <legend class="q-input-group-legend" v-if="title">{{ title }}</legend>
    <slot />
  </fieldset>
</template>

<script setup>
defineProps({
  title: {
    type: String,
  },
  border: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped>
.q-input-group-legend {
  font-size: var(--text-size-md);
  font-weight: 600;
  transform: translateX(-1px);
}

.q-input-group {
  padding: var(--gap-xl) 0;
  color: var(--accent-color-primary);
  width: 100%;
  margin: auto;
  border: none;
}

.q-input-group-border {
  border: 1px solid var(--accent-color-primary);
  border-radius: var(--gap-xxs);
}

.q-input-group-border > .q-input-group-legend {
  color: var(--white-color);
  background-color: var(--accent-color-primary);
  padding: var(--gap-xs) var(--gap-md);
  border-radius: var(--gap-xxs);
}
</style>