Personizely UI

Appearance

Input ​

Shows a text input component.

Examples ​

Basic input ​

Code

vue
<template>
  <Input v-model="value" class="max-w-xs" />
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { ref } from 'vue'

const value = ref()
</script>

Input with an icon ​

Code

vue
<template>
  <Input
    v-model="value"
    icon="search"
    placeholder="Search..."
    class="max-w-xs"
  />
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { ref } from 'vue'

const value = ref()
</script>

Input with an icon on the right ​

Code

vue
<template>
  <Input
    v-model="value"
    icon="search"
    placeholder="Search..."
    icon-position="right"
    class="max-w-xs"
  />
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { ref } from 'vue'

const value = ref()
</script>

File input ​

Code

vue
<template>
  <Input
    type="file"
    placeholder="Upload your file..."
    class="max-w-xs"
  />
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>

Disabled input ​

Code

vue
<template>
  <Input
    v-model="value"
    icon="search"
    placeholder="Search..."
    disabled
    class="max-w-xs"
  />
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { ref } from 'vue'

const value = ref()
</script>

Readonly input ​

Code

vue
<template>
  <Input
    v-model="value"
    readonly
    class="max-w-xs"
  />
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
const value = 'This is a value you can read but not edit.'
</script>

Leading slot ​

$

Code

vue
<template>
  <Input
    v-model="value"
    placeholder="Cost"
    type="number"
    :min="0"
    class="max-w-xs"
  >
    <template #leading>
      <span class="block text-sm text-center w-4">
        $
      </span>
    </template>
  </Input>
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { ref } from 'vue'

const value = ref()
</script>

Trailing slot ​

USD

Code

vue
<template>
  <Input
    v-model="value"
    placeholder="Cost"
    type="number"
    :min="0"
    class="max-w-xs"
  >
    <template #trailing>
      <span class="block text-[0.6rem]">
        USD
      </span>
    </template>
  </Input>
</template>

<script setup lang="ts">
import { Input } from '@/components/ui/input'
import { ref } from 'vue'

const value = ref()
</script>