Menu
Documentation
v4.0.0-beta.4

Field

<BaseField /> · A form control container.

View SourceOpen Issue
Username
vue
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <BaseField
    id="username"
    v-slot="{ inputAttrs, inputRef }"
    label="Username"
  >
    <BaseInput :ref="inputRef" v-model="value" v-bind="inputAttrs" placeholder="Ex: johndoe83" />
  </BaseField>
</template>

Features

  • Supports all input types
  • Handles all input states
  • Handles accessibiliy
  • Handles input orientation
  • Handles label and description

Anatomy

This component is the standalone version of the PrimitiveField component. It has a single slot where you can place your input component. It also has various props to handle the label, description, and other field options.

vue
<template>
  <BaseField>
    <!-- Your input component here -->
  </BaseField>
</template>

API Reference

This component has props that you can use to modify its visual style and behaviour.

Prop Type
label
default:-
string
description
default:-
string
hint
default:-
string
error
default:-
string
state
default:"idle"
"error" | "idle" | "loading" | "success"
id
default:-
string
name
default:-
string
required
default:false
boolean
disabled
default:-
boolean
fieldset
default:false
boolean
Slot Type
#default
{ inputRef: (el: any) => void; inputAttrs: Record<string, any>; }
#label
any
#description
any
#hint
any
#error
any

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Field elements variables */
  --color-field-label: var(--color-muted-600);
  --color-field-description: var(--color-muted-500);
  --color-field-loading: var(--color-muted-400);
}

Examples

Text input

Fields can be used with any input component. Fields handle all states an input component can go through, such as idle, loading, success and error. Here is an example using the BaseInput component:

Username
vue
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <BaseField
    id="username"
    v-slot="{ inputAttrs, inputRef }"
    label="Username"
  >
    <BaseInput :ref="inputRef" v-model="value" v-bind="inputAttrs" placeholder="Ex: johndoe83" />
  </BaseField>
</template>

Select

Fields can be used with any input component. Fields handle all states an input component can go through, such as idle, loading, success and error. Here is an example using the BaseSelect component:

Username
vue
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <BaseField
    id="username"
    v-slot="{ inputAttrs, inputRef }"
    label="Username"
    class="w-full"
  >
    <BaseSelect :ref="inputRef" v-model="value" v-bind="inputAttrs" placeholder="Select a value...">
      <BaseSelectItem value="1">
        Option 1
      </BaseSelectItem>
      <BaseSelectItem value="2">
        Option 2
      </BaseSelectItem>
      <BaseSelectItem value="3">
        Option 3
      </BaseSelectItem>
      <BaseSelectItem value="4">
        Option 4
      </BaseSelectItem>
    </BaseSelect>
  </BaseField>
</template>

Autocomplete

Fields can be used with any input component. Fields handle all states an input component can go through, such as idle, loading, success and error. Here is an example using the BaseAutocomplete component:

Search an option
vue
<template>
  <BaseField
    id="options"
    v-slot="{ inputAttrs, inputRef }"
    label="Search an option"
    class="w-full"
  >
    <BaseAutocomplete
      :ref="inputRef"
      v-bind="inputAttrs"
      placeholder="autocomplete placeholder"
      clearable
    >
      <BaseAutocompleteItem value="1">
        Option 1
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="2">
        Option 2
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="3">
        Option 3
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="4">
        Option 4
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="5">
        Option 5
      </BaseAutocompleteItem>
      <BaseAutocompleteItem value="6">
        Option 6
      </BaseAutocompleteItem>
    </BaseAutocomplete>
  </BaseField>
</template>

File input

Fields can be used with any input component. Fields handle all states an input component can go through, such as idle, loading, success and error. Here is an example using the BaseInputFile component:

Upload file
vue
<template>
  <div class="flex items-center justify-center px-4 pb-0 pt-4">
    <div class="w-full rounded-xl bg-muted-100 p-4 dark:bg-muted-900/40">
      <div class="flex w-full items-center">
        <div class="flex w-full max-w-sm items-end gap-4">
          <BaseField
            id="upload"
            v-slot="{ inputAttrs, inputRef }"
            label="Upload file"
            class="w-full"
          >
            <BaseInputFile :ref="inputRef" v-bind="inputAttrs" placeholder="placeholder" />
          </BaseField>
        </div>
      </div>
    </div>
  </div>
</template>

Number input

Fields can be used with any input component. Fields handle all states an input component can go through, such as idle, loading, success and error. Here is an example using the BaseInputNumber component:

Quantity
vue
<template>
  <BaseField
    id="quantity"
    v-slot="{ inputAttrs, inputRef }"
    label="Quantity"
    class="w-full"
  >
    <BaseInputNumber :ref="inputRef" v-bind="inputAttrs" placeholder="placeholder" />
  </BaseField>
</template>

Textarea

Fields can be used with any input component. Fields handle all states an input component can go through, such as idle, loading, success and error. Here is an example using the BaseTextarea component:

Message
vue
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <BaseField
    id="message"
    v-slot="{ inputAttrs, inputRef }"
    label="Message"
    class="w-full"
  >
    <BaseTextarea :ref="inputRef" v-model="value" v-bind="inputAttrs" placeholder="Write a message..." />
  </BaseField>
</template>

Dropdown

Heading