Home

Button
Chip Button
Icon Button
Input
Popover
Select

Input Component

The Input component is a flexible text input that supports various styling options and can be easily customized. It provides a simple way to handle user input with built-in v-model support and customizable styling.

Examples

Basic Usage

Simple input with default styling and placeholder text. The component supports v-model for two-way data binding.

Value: 
<script setup lang="ts">
  import { Input, InputGroup } from '@pikaso/core'
  import { ref } from 'vue'

  const value = ref('')
</script>

<template>
  <div class="flex flex-col gap-2">
    <InputGroup>
      <Input
        v-model="value"
        placeholder="Type something..."
      />
    </InputGroup>

    <span class="text-surface-foreground-1 text-sm">Value: {{ value }}</span>
  </div>
</template>

Default Value

You can provide a default value that will be used when the component is mounted.

Value: This is a default value
<script setup lang="ts">
  import { Input, InputGroup } from '@pikaso/core'
  import { ref } from 'vue'

  const value = ref('This is a default value')
</script>

<template>
  <div class="flex flex-col gap-2">
    <InputGroup>
      <Input
        v-model="value"
        :default-value="value"
      />
    </InputGroup>

    <span class="text-surface-foreground-1 text-sm">Value: {{ value }}</span>
  </div>
</template>

With Icon

Input can be combined with icons using InputGroup to create search fields or other icon-enhanced inputs.

Value: 
<script setup lang="ts">
  import { Input, InputGroup } from '@pikaso/core'
  import { Search } from 'lucide-vue-next'

  import { ref } from 'vue'

  const value = ref('')
</script>

<template>
  <div class="flex flex-col gap-2">
    <InputGroup>
      <Search />

      <Input
        v-model="value"
        placeholder="Search..."
      />
    </InputGroup>

    <span class="text-surface-foreground-1 text-sm">Value: {{ value }}</span>
  </div>
</template>

Usage Notes

  • The Input component accepts all standard HTML input attributes through prop forwarding
  • Styling can be customized using Tailwind classes via the class prop
  • Uses v-model for two-way data binding with automatic type handling for string and number values
  • Default values can be set using either v-model or the defaultValue prop
  • Can be wrapped with InputGroup to create complex input combinations with icons or other elements