# Install

```shell
npm i @mate-vue/custom-field
```

# Import

```vue
<script setup>
import { MateCustomField } from '@mate-vue/custom-field';
</script>
```

# Variants

## Text

```vue
<template>
  <MateCustomField theme="range-selector">
    <MateTextField label="Start"></MateTextField>
    <MateTextField label="End"></MateTextField>
  </MateCustomField>
</template>
```

## Date Picker

```vue
<template>
  <MateCustomField theme="range-selector">
    <MateDatePicker label="Start"></MateDatePicker>
    <MateDatePicker label="End"></MateDatePicker>
  </MateCustomField>
</template>
```

## Time Picker

```vue
<template>
  <MateCustomField theme="range-selector">
    <MateTimePicker label="Start"></MateTimePicker>
    <MateTimePicker label="End"></MateTimePicker>
  </MateCustomField>
</template>
```

## Combo Box

```vue
<template>
  <MateCustomField theme="range-selector">
    <MateComboBox label="Start" :items="items"></MateComboBox>
    <MateComboBox label="End" :items="items"></MateComboBox>
  </MateCustomField>
</template>
```