Input · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JInput } from '@juxtui/ui'

Usage #

<JInput v-model="email" label="Email" type="email" placeholder="you@example.com" />

Variants & examples #

Leading and trailing icons#

Anything in the leading and trailing slots sits inside the field. Clicking the frame focuses the input.

/

Username

.juxt.dev

<script setup lang="ts">
import { AtSign, Search } from '@lucide/vue'

const query = ref('')
const handle = ref('juxt')
</script>

<template>
  <div class="flex flex-col gap-5">
    <JInput v-model="query" type="search" placeholder="Search projects" aria-label="Search projects">
      <template #leading><Search /></template>
      <template #trailing><kbd class="j-kbd">/</kbd></template>
    </JInput>
    <JInput v-model="handle" label="Username">
      <template #leading><AtSign /></template>
      <template #trailing><span class="text-xs">.juxt.dev</span></template>
    </JInput>
  </div>
</template>

Validation#

Pass a message to error. It replaces the description and is announced through aria-describedby.

Project URL

Use lowercase letters, numbers and dashes.

<script setup lang="ts">
const slug = ref('My Project')
const error = computed(() =>
  /^[a-z0-9-]+$/.test(slug.value) ? undefined : 'Use lowercase letters, numbers and dashes.',
)
</script>

<template>
  <JInput
    v-model="slug"
    label="Project URL"
    description="juxt.dev/your-project"
    :error="error"
    required
  />
</template>

Disabled and read-only#

Workspace

API key

<template>
  <div class="flex flex-col gap-5">
    <JInput label="Workspace" model-value="Acme Inc." disabled />
    <JInput label="API key" model-value="jx_live_4f9a…c21b" readonly />
  </div>
</template>

Sizes#

<template>
  <div class="flex flex-col gap-4">
    <JInput size="sm" placeholder="Small" aria-label="Small" />
    <JInput size="md" placeholder="Medium" aria-label="Medium" />
    <JInput size="lg" placeholder="Large" aria-label="Large" />
  </div>
</template>

API #

Props

Prop	Type	Default	Description
modelValue	`string \| number \| null`	`''`	Bound with `v-model`.
label	`string`	—	Visible label, also used as the accessible name.
description	`string`	—	Supporting text under the control. Replaced by the error message while one is shown.
error	`string \| boolean`	—	An error message, or `true` to mark the field invalid without a message.
required	`boolean`	`false`	Marks the field as required, natively and visually.
disabled	`boolean`	`false`	Disables the control.
id	`string`	—	Id of the control. Generated (SSR-safe) when omitted.
type	`string`	`'text'`	Native input type.
placeholder	`string`	—	Placeholder text. Never a substitute for a label.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Control height.
readonly	`boolean`	`false`	Read-only, still focusable and selectable.
name	`string`	—	Form field name.
autocomplete	`string`	—	Native autocomplete hint.

Events

Event	Payload	Description
update:modelValue	`string \| number`	Emitted on input.
focus, blur, keydown, …	`Event`	Any other listener or attribute is forwarded to the native `<input>`; `class` and `style` go on the root.

Slots

Slot	Props	Description
leading	—	Content before the input, usually an icon.
trailing	—	Content after the input — an icon, a unit or a small button.
label	—	Custom label content.

Methods

Method	Signature	Description
focus()	`() => void`	Focus the input.
select()	`() => void`	Select the input’s text.

Accessibility #

The label is a real <label for> pointing at the input.
Description and error are linked with aria-describedby; an error also sets aria-invalid.
Required fields use the native required attribute. The asterisk is decorative and hidden from screen readers.