or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-inputs.mddata-display.mddatetime.mdform-components.mdindex.mdlayout.mdnavigation.mdoverlay.mdprogrammatic.mdutilities.md
tile.json

advanced-inputs.mddocs/

Advanced Input Components

Sophisticated input components for complex data entry scenarios including autocomplete, color selection, tags, and file uploads.

Autocomplete Component

Input with dropdown suggestions and customizable filtering.

export const BAutocomplete: Component<{
  modelValue?: string;
  data?: any[];
  field?: string;
  keepFirst?: boolean;
  clearOnSelect?: boolean;
  openOnFocus?: boolean;
  customFormatter?: (option: any) => string;
  checkInfiniteScroll?: boolean;
  keepOpen?: boolean;
  selectOnClickOutside?: boolean;
  maxHeight?: string | number;
  dropdown?: boolean;
  groupField?: string;
  groupOptions?: string;
  iconRight?: string;
  iconRightClickable?: boolean;
  confirmKeys?: string[];
  size?: 'is-small' | 'is-medium' | 'is-large';
  expanded?: boolean;
  loading?: boolean;
  icon?: string;
  iconPack?: string;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  maxlength?: number;
  appendToBody?: boolean;
  teleported?: boolean;
}>;

Usage example:

import { BAutocomplete } from "buefy";

// Basic autocomplete
<BAutocomplete 
  v-model="selectedUser" 
  :data="filteredUsers"
  placeholder="Search users..."
  field="name"
  @input="filterUsers"
/>

// Grouped autocomplete
<BAutocomplete 
  v-model="selectedItem"
  :data="groupedData"
  group-field="category"
  group-options="items"
  field="name"
  placeholder="Search by category..."
/>

// Custom formatting
<BAutocomplete 
  v-model="selectedProduct"
  :data="products"
  :custom-formatter="formatProduct"
  placeholder="Search products..."
/>

Colorpicker Component

Color selection component with various input modes and format support.

export const BColorpicker: Component<{
  modelValue?: string;
  alpha?: boolean;
  inline?: boolean;
  disabled?: boolean;
  horizontalColorVariants?: boolean;
  icon?: string;
  iconPack?: string;
  placeholder?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  expanded?: boolean;
}>;

Usage example:

import { BColorpicker } from "buefy";

// Basic color picker
<BColorpicker 
  v-model="selectedColor" 
  placeholder="Select color"
/>

// With alpha channel
<BColorpicker 
  v-model="colorWithAlpha" 
  :alpha="true"
  placeholder="Select color with opacity"
/>

// Inline color picker
<BColorpicker 
  v-model="themeColor" 
  :inline="true"
/>

Taginput Component

Input for creating and managing multiple tags with autocomplete support.

export const BTaginput: Component<{
  modelValue?: string[];
  data?: string[];
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  rounded?: boolean;
  attached?: boolean;
  maxtags?: number;
  hasCounter?: boolean;
  field?: string;
  autocomplete?: boolean;
  nativeAutocomplete?: string;
  disabled?: boolean;
  ellipsis?: boolean;
  openOnFocus?: boolean;
  keepFirst?: boolean;
  confirmKeyCodes?: number[];
  removeOnKeys?: number[];
  allowNew?: boolean;
  allowDuplicates?: boolean;
  onPasteSeparators?: string[];
  beforeAdding?: (tag: any) => boolean;
  size?: 'is-small' | 'is-medium' | 'is-large';
  placeholder?: string;
  icon?: string;
  iconPack?: string;
  expanded?: boolean;
  checkInfiniteScroll?: boolean;
  groupField?: string;
  groupOptions?: string;
  appendToBody?: boolean;
  createTag?: (tag: string) => any;
  customFormatter?: (option: any) => string;
}>;

Usage example:

import { BTaginput } from "buefy";

// Basic tag input
<BTaginput 
  v-model="tags" 
  placeholder="Add tags"
  :allow-new="true"
/>

// Tag input with autocomplete
<BTaginput 
  v-model="selectedTags"
  :data="availableTags"
  :autocomplete="true"
  placeholder="Search and select tags..."
  field="name"
/>

// Limited tags with counter
<BTaginput 
  v-model="limitedTags"
  :maxtags="5"
  :has-counter="true"
  placeholder="Add up to 5 tags"
/>

Numberinput Component

Numeric input with increment/decrement controls and validation.

export const BNumberinput: Component<{
  modelValue?: number;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  size?: 'is-small' | 'is-medium' | 'is-large';
  expanded?: boolean;
  placeholder?: string;
  editable?: boolean;
  controls?: boolean;
  controlsAlignment?: 'right' | 'left';
  controlsPosition?: 'compact';
  controlsRounded?: boolean;
  lazyFormatter?: boolean;
  ariaMinusLabel?: string;
  ariaPlusLabel?: string;
  exponential?: boolean | number;
  trapFocus?: boolean;
  mobileNative?: boolean;
  customFormatter?: (value: number) => string;
  customParser?: (value: string) => number;
}>;

Usage example:

import { BNumberinput } from "buefy";

// Basic number input
<BNumberinput 
  v-model="quantity" 
  :min="1" 
  :max="100"
  placeholder="Enter quantity"
/>

// Currency input with custom formatting
<BNumberinput 
  v-model="price"
  :step="0.01"
  :custom-formatter="formatCurrency"
  :custom-parser="parseCurrency"
  placeholder="0.00"
/>

// Compact controls
<BNumberinput 
  v-model="rating"
  :min="0"
  :max="5"
  :step="0.1"
  controls-position="compact"
/>

Slider Component

Range slider for numeric value selection with customizable appearance.

export const BSlider: Component<{
  modelValue?: number | number[];
  min?: number;
  max?: number;
  step?: number;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  size?: 'is-small' | 'is-medium' | 'is-large';
  ticks?: boolean;
  tooltip?: boolean;
  tooltipType?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
               'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  rounded?: boolean;
  disabled?: boolean;
  lazy?: boolean;
  customFormatter?: (value: number) => string;
  ariaLabel?: string | string[];
  biggerSliderFocus?: boolean;
  indicator?: boolean;
}>;

export const BSliderTick: Component<{
  value?: number;
  label?: string;
}>;

Usage example:

import { BSlider } from "buefy";

// Basic slider
<BSlider 
  v-model="volume" 
  :min="0" 
  :max="100"
  type="is-primary"
/>

// Range slider
<BSlider 
  v-model="priceRange" 
  :min="0" 
  :max="1000"
  :tooltip="true"
  type="is-info"
/>

// Slider with ticks
<BSlider 
  v-model="rating"
  :min="1"
  :max="5"
  :step="1"
  :ticks="true"
  :custom-formatter="formatRating"
/>

Rate Component

Star rating component for user feedback and rating display.

export const BRate: Component<{
  modelValue?: number;
  max?: number;
  icon?: string;
  iconPack?: string;
  hasHalf?: boolean;
  hasText?: boolean;
  showText?: boolean;
  showScore?: boolean;
  customText?: string;
  texts?: string[];
  size?: 'is-small' | 'is-medium' | 'is-large';
  spaced?: boolean;
  rtl?: boolean;
  disabled?: boolean;
  locale?: string | string[];
}>;

Usage example:

import { BRate } from "buefy";

// Basic rating
<BRate 
  v-model="userRating" 
  :max="5"
  icon="star"
/>

// Rating with half stars and text
<BRate 
  v-model="productRating"
  :has-half="true"
  :show-text="true"
  :texts="['Terrible', 'Bad', 'OK', 'Good', 'Excellent']"
/>

// Read-only rating display
<BRate 
  :value="averageRating" 
  :disabled="true"
  :show-score="true"
/>

Upload Component

File upload component with drag-and-drop support and progress indication.

export const BUpload: Component<{
  modelValue?: File | File[];
  multiple?: boolean;
  disabled?: boolean;
  accept?: string;
  dragDrop?: boolean;
  native?: boolean;
  expanded?: boolean;
  rounded?: boolean;
}>;

Usage example:

import { BUpload } from "buefy";

// Basic file upload
<BUpload v-model="selectedFile" drag-drop>
  <section class="section">
    <div class="content has-text-centered">
      <p>
        <BIcon icon="upload" size="is-large" />
      </p>
      <p>Drop your file here or click to upload</p>
    </div>
  </section>
</BUpload>

// Multiple file upload
<BUpload 
  v-model="selectedFiles" 
  :multiple="true"
  accept="image/*"
  @input="handleFiles"
>
  <BButton type="is-primary" icon-left="upload">
    Choose Images
  </BButton>
</BUpload>

// Upload with preview
<BUpload v-model="imageFile" @input="previewImage">
  <figure class="image is-128x128" v-if="previewUrl">
    <img :src="previewUrl" alt="Preview">
  </figure>
  <BButton v-else type="is-primary">
    Select Image
  </BButton>
</BUpload>

Form Integration

Advanced inputs integrate seamlessly with form validation:

// Complete form example
<form @submit.prevent="submitForm">
  <BField label="Product Name">
    <BAutocomplete 
      v-model="product.name"
      :data="productSuggestions"
      @input="searchProducts"
    />
  </BField>

  <BField label="Price">
    <BNumberinput 
      v-model="product.price"
      :min="0"
      :step="0.01"
      :custom-formatter="formatPrice"
    />
  </BField>

  <BField label="Category Tags">
    <BTaginput 
      v-model="product.tags"
      :data="availableTags"
      :autocomplete="true"
    />
  </BField>

  <BField label="Rating">
    <BSlider 
      v-model="product.rating"
      :min="1"
      :max="5"
      :step="0.5"
    />
  </BField>

  <BField label="Product Images">
    <BUpload 
      v-model="product.images"
      :multiple="true"
      accept="image/*"
      drag-drop
    />
  </BField>

  <BButton type="is-primary" native-type="submit">
    Save Product
  </BButton>
</form>