TextField
Captures user input with an optional slot for buttons and icons.
vue
<script setup lang="ts">
import SearchIcon from '~icons/ri/search-line'
import { TextField } from '@typlog/ui'
</script>
<template>
<div class="flex">
<TextField placeholder="Search the docs…">
<template #left>
<SearchIcon />
</template>
</TextField>
</div>
</template>API Reference
| Prop | Default | Type |
|---|---|---|
| color | – | |
| id | – | string |
| modelValue | "" | any |
| radius | – | "none""small""medium""large""full" |
| size | "2" | "1""2""3" |
| type | "text" | Enum |
| variant | "surface" | "soft""surface" |
Examples
Size
vue
<script setup lang="ts">
import { TextField } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<div class="w-60">
<TextField placeholder="Search the docs…" size="1" />
</div>
<div class="w-80">
<TextField placeholder="Search the docs…" size="2" />
</div>
<div class="w-96">
<TextField placeholder="Search the docs…" size="3" />
</div>
</div>
</template>Variant
vue
<script setup lang="ts">
import { TextField } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<div class="w-80">
<TextField placeholder="Search the docs…" variant="surface" />
</div>
<div class="w-80">
<TextField placeholder="Search the docs…" variant="soft" />
</div>
</div>
</template>Color
vue
<script setup lang="ts">
import { TextField } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-4">
<TextField placeholder="Search the docs…" variant="surface" color="indigo" />
<TextField placeholder="Search the docs…" variant="soft" color="indigo" />
</div>
<div class="flex items-center gap-4">
<TextField placeholder="Search the docs…" variant="surface" color="green" />
<TextField placeholder="Search the docs…" variant="soft" color="green" />
</div>
<div class="flex items-center gap-4">
<TextField placeholder="Search the docs…" variant="surface" color="red" />
<TextField placeholder="Search the docs…" variant="soft" color="red" />
</div>
</div>
</template>Radius
vue
<script setup lang="ts">
import { TextField } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<div class="w-80">
<TextField placeholder="Search the docs…" radius="none" />
</div>
<div class="w-80">
<TextField placeholder="Search the docs…" radius="small" />
</div>
<div class="w-80">
<TextField placeholder="Search the docs…" radius="medium" />
</div>
<div class="w-80">
<TextField placeholder="Search the docs…" radius="large" />
</div>
<div class="w-80">
<TextField placeholder="Search the docs…" radius="full" />
</div>
</div>
</template>Type
vue
<script setup lang="ts">
import { TextField } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<div class="w-80">
<TextField type="text" />
</div>
<div class="w-80">
<TextField type="url" />
</div>
<div class="w-80">
<TextField type="email" />
</div>
<div class="w-80">
<TextField type="number" />
</div>
<div class="w-80">
<TextField type="tel" />
</div>
<div class="w-80">
<TextField type="password" />
</div>
<div class="w-80">
<TextField type="search" />
</div>
<div class="w-80">
<TextField type="date" />
</div>
<div class="w-80">
<TextField type="datetime-local" />
</div>
<div class="w-80">
<TextField type="month" />
</div>
<div class="w-80">
<TextField type="time" />
</div>
<div class="w-80">
<TextField type="week" />
</div>
<div class="w-80">
<TextField type="file" />
</div>
</div>
</template> Last updated Sep 15, 2026