Kappa / Input

API key

Your API key is encrypted before it is stored.

<script setup>
import { ref } from "vue";
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";

const apiKey = ref("");
</script>

<template>
  <Label for="api-key">API key</Label>
  <Input
    id="api-key"
    v-model="apiKey"
    aria-describedby="api-key-help"
    autocomplete="off"
    password-manager-ignore
    placeholder="sk-..."
  />
  <p id="api-key-help">Your API key is encrypted before it is stored.</p>
</template>

Installation

Input is part of the main Kappa package. It renders native HTML and adds no state-machine dependency.

Barrel

import { Input } from "@dicehub/kappa";

Granular

import { Input } from "@dicehub/kappa/components/input";

Input forwards native input attributes, data attributes, classes, styles, and event listeners. Use v-model for a controlled value or native value for an uncontrolled initial value. Every Input needs an accessible name.

The resting border uses --kappa-input-border. Hover and focus use--kappa-focus; focus adds a 5 px glow. Invalid inputs keep the danger color.

<script setup>
import { ref } from "vue";
import { Input } from "@dicehub/kappa/components/input";

const email = ref("");
</script>

<template>
  <Input
    v-model="email"
    aria-label="Email address"
    autocomplete="email"
    placeholder="[email protected]"
    type="email"
  />
</template>

Composition

Typical part hierarchy

Label [for="control-id"] (optional)
Input <input id="control-id">
└── native value, attributes, and events

Kappa uses a native control without label, help, or error content around it. Label and Field provide that content.

Use Label with a standalone Input.
Use Field.Input when Ark UI must connect required, disabled, invalid, helper, and error state.
Use native aria-describedby for persistent help or error content outside Field.
The visual size prop replaces the native character-count size attribute because Input fills its container.

Examples

Sizes

Use compact sizes for dense toolbars and larger sizes for prominent form entry.

base

<script setup>
import { Input } from "@dicehub/kappa/components/input";
</script>

<template>
<Input size="xs" aria-label="Extra-small input" value="xs density" />
<Input size="sm" aria-label="Small input" value="sm density" />
<Input size="base" aria-label="Base input" value="base density" />
<Input size="lg" aria-label="Large input" value="lg density" />
</template>

Controlled Value

v-model receives the native input value as a string on every input event.

Case name Current value: Rotor refinement

<script setup>
import { ref } from "vue";
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";

const caseName = ref("Rotor refinement");
</script>

<template>
  <Label for="case-name">Case name</Label>
  <Input id="case-name" v-model="caseName" />
  <output for="case-name">Current value: {{ caseName }}</output>
</template>

Form States

Native disabled and read-only behavior remains authoritative. Use invalid oraria-invalid="true" for validation presentation, then connect the message.

Disabled

Read only

Invalid

Use letters and numbers only.

<script setup>
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
<Label for="disabled-input" data-disabled>Disabled</Label>
<Input id="disabled-input" value="Unavailable" disabled />

<Label for="readonly-input">Read only</Label>
<Input id="readonly-input" value="build-2026.08" readonly />

<Label for="invalid-input">Invalid</Label>
<Input
  id="invalid-input"
  value="invalid value"
  invalid
  aria-describedby="invalid-input-error"
/>
<p id="invalid-input-error">Use letters and numbers only.</p>
</template>

File

Set type="file" and use native accept, multiple, and form attributes.

Geometry file

STEP and IGES files up to 50 MB.

<script setup>
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
<Label for="geometry-file">Geometry file</Label>
<Input
  id="geometry-file"
  name="geometry"
  type="file"
  accept=".step,.stp,.iges,.igs"
/>
<p>STEP and IGES files up to 50 MB.</p>
</template>

Inline Action

Place Input beside Button for a compact search or filter action. Keep a visible label.

Search cases

<script setup>
import { Button } from "@dicehub/kappa/components/button";
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
<Label for="case-search">Search cases</Label>
<div class="inline-search">
  <Input id="case-search" name="search" type="search" placeholder="Search..." />
  <Button type="button">Search</Button>
</div>
</template>

Grid

Use container layout for related inputs. Each control keeps its own visible label and id.

First name

Last name

<script setup>
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
<div class="name-grid">
  <div>
    <Label for="first-name">First name</Label>
    <Input id="first-name" autocomplete="given-name" value="Jordan" />
  </div>
  <div>
    <Label for="last-name">Last name</Label>
    <Input id="last-name" autocomplete="family-name" value="Lee" />
  </div>
</div>
</template>

Required

The native required attribute controls constraint validation. The visible marker is supplementary.

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";

const workspace = ref("");
const createWorkspace = () => {};
</script>

<template>
<form @submit.prevent="createWorkspace">
  <Label for="workspace">Workspace name <span aria-hidden="true">*</span></Label>
  <Input id="workspace" v-model="workspace" name="workspace" required />
  <Button type="submit">Create workspace</Button>
</form>
</template>

Label Metadata

Place short, non-interactive metadata beside label text. Keep the control name concise.

Webhook URL Beta

<script setup>
import { Badge } from "@dicehub/kappa/components/badge";
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
<Label for="webhook-url">
  Webhook URL
  <Badge variant="beta">Beta</Badge>
</Label>
<Input id="webhook-url" type="url" placeholder="https://api.example.com/webhook" />
</template>

Right to Left

Logical padding, file-button spacing, and text alignment follow the inherited direction.

مفتاح API

يتم تشفير مفتاح API وتخزينه بأمان.

<script setup>
import { Input } from "@dicehub/kappa/components/input";
import { Label } from "@dicehub/kappa/components/label";
</script>

<template>
<div dir="rtl" lang="ar">
  <Label for="api-key-ar">مفتاح API</Label>
  <Input id="api-key-ar" aria-describedby="api-key-ar-help" placeholder="sk-..." />
  <p id="api-key-ar-help">يتم تشفير مفتاح API وتخزينه بأمان.</p>
</div>
</template>

Accessibility

Give every Input a visible Label when the layout permits it. A placeholder is not a label.
Connect persistent instructions and validation messages with aria-describedby.
Use native disabled, readonly, required, type, and autocomplete attributes.
Use invalid only with a clear message that explains how to correct the value.
Password-manager suppression is advisory. Do not use it on username, password, or payment fields.
Input preserves visible focus in both themes, reduced motion, and forced-color modes.

API Reference

Input

Renders one native input. Standard native attributes pass to the same element.

Prop	Type	Default	Description
`invalid`	`boolean`	`false`	Sets invalid presentation and aria-invalid=true.
`modelValue`	`string \| number`	`—`	Controlled value used by Vue v-model. Input updates emit strings.
`passwordManagerIgnore`	`boolean`	`false`	Adds common password-manager suppression attributes for non-credential fields.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Sets visual control density and replaces the native character-count size attribute.

Events

Event	Payload	Description
`update:modelValue`	`string`	Emitted on native input events for Vue v-model.
`input / change`	`Event`	Native listeners pass through to the input element.

Data Attributes

Attribute	Value	Description
`data-slot`	`"input"`	Stable root-part selector.
`data-size`	`"xs" \| "sm" \| "base" \| "lg"`	Resolved density.
`data-invalid`	`""`	Present for invalid prop or ARIA state.

Exports

Export	Description
`Input`	Native styled text-entry control.
`InputProps / InputEmits`	Public native prop and Vue event contracts.
`InputModelValue / InputSize`	Controlled-value and density types.
`INPUT_SIZES`	Supported density values.
`INPUT_DEFAULT_SIZE`	Default base density.
`isInputSize`	Supported-size type guard.
`resolveInputSize`	Safe size resolver with base fallback.