Input — ARC UI

Components

Input

input

hybrid

<arc-input>

Overview

Guidelines

When to use

Always provide a `label` so the field is accessible to screen readers
Use the most specific `type` available (e.g. `email` for email addresses) to trigger the correct mobile keyboard
Set `placeholder` to show an example value, not as a replacement for the label
Use `multiline` for any field that may need more than one line of text
Use the `prefix` slot for search icons or currency symbols that contextualise the input
Use the `suffix` slot for unit labels, clear buttons, or status indicators
Group related Inputs inside a Form component for coordinated validation
Mark required fields with the `required` prop so validation is handled automatically

When not to use

Do not use placeholder text as the only label -- it disappears on focus and fails accessibility
Do not set `type="password"` on a multiline input -- passwords are always single-line
Do not disable inputs without explaining to the user why the field is unavailable
Avoid overriding the built-in validation styling with custom CSS -- use design tokens instead
Do not use Input for structured data like dates or selects -- use DatePicker or Select instead

Features

Integrated label rendered above the field with automatic `for`/`id` association
Multiple input types: text, email, tel, url, and password
Multiline mode converts to a resizable textarea with a single boolean prop
Prefix and suffix slots for icons or inline adornments inside the field box
Placeholder text with accessible contrast ratios
Required-field indicator with built-in validation message
Disabled state that greys out the field and blocks interaction
Keyboard-accessible with visible focus ring following design tokens
Pairs with Form for coordinated validation and submission

Preview

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<!-- Basic form fields -->
<div style="display:flex; flex-direction:column; width:100%; max-width:400px; gap:16px;">
  <arc-input label="Name" name="name" placeholder="Jane Doe" required></arc-input>
  <arc-input label="Email" name="email" type="email" placeholder="jane@example.com" required></arc-input>
  <arc-input label="Message" name="message" multiline placeholder="How can we help?" required></arc-input>
</div>

<!-- With prefix icon (search) -->
<arc-input label="Search" placeholder="Search...">
  <svg slot="prefix" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/></svg>
</arc-input>

import { Input } from '@arclux/arc-ui-react';

<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: 400, gap: 16 }}>
  <Input label="Name" name="name" placeholder="Jane Doe" required />
  <Input label="Email" name="email" type="email" placeholder="jane@example.com" required />
  <Input label="Message" name="message" multiline placeholder="How can we help?" required />
</div>

{/* With prefix icon */}
<Input label="Search" placeholder="Search...">
  <svg slot="prefix" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20"><path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd"/></svg>
</Input>

<script setup>
import { Input } from '@arclux/arc-ui-vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; width:100%; max-width:400px; gap:16px;">
    <Input label="Name" name="name" placeholder="Jane Doe" required />
    <Input label="Email" name="email" type="email" placeholder="jane@example.com" required />
    <Input label="Message" name="message" multiline placeholder="How can we help?" required />
  </div>
</template>

<script>
  import { Input } from '@arclux/arc-ui-svelte';
</script>

<div style="display:flex; flex-direction:column; width:100%; max-width:400px; gap:16px;">
  <Input label="Name" name="name" placeholder="Jane Doe" required />
  <Input label="Email" name="email" type="email" placeholder="jane@example.com" required />
  <Input label="Message" name="message" multiline placeholder="How can we help?" required />
</div>

import { Component } from '@angular/core';
import { Input } from '@arclux/arc-ui-angular';

@Component({
  imports: [Input],
  template: `
    <div style="display:flex; flex-direction:column; width:100%; max-width:400px; gap:16px;">
      <Input label="Name" name="name" placeholder="Jane Doe" required></Input>
      <Input label="Email" name="email" type="email" placeholder="jane@example.com" required></Input>
      <Input label="Message" name="message" multiline placeholder="How can we help?" required></Input>
    </div>
  `,
})
export class ContactFormComponent {}

import { Input } from '@arclux/arc-ui-solid';

<div style={{ display: 'flex', 'flex-direction': 'column', width: '100%', 'max-width': '400px', gap: '16px' }}>
  <Input label="Name" name="name" placeholder="Jane Doe" required />
  <Input label="Email" name="email" type="email" placeholder="jane@example.com" required />
  <Input label="Message" name="message" multiline placeholder="How can we help?" required />
</div>

import { Input } from '@arclux/arc-ui-preact';

<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: 400, gap: 16 }}>
  <Input label="Name" name="name" placeholder="Jane Doe" required />
  <Input label="Email" name="email" type="email" placeholder="jane@example.com" required />
  <Input label="Message" name="message" multiline placeholder="How can we help?" required />
</div>

<div style="display:flex; flex-direction:column; width:100%; max-width:400px; gap:16px;">
  <arc-input label="Name" name="name" placeholder="Jane Doe" required></arc-input>
  <arc-input label="Email" name="email" type="email" placeholder="jane@example.com" required></arc-input>
  <arc-input label="Message" name="message" multiline placeholder="How can we help?" required></arc-input>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-input — self-contained, no external CSS needed -->
<div class="arc-input">

</div>

API

Prop	Type	Default	Description
`label`	`string`	—	Visible label rendered above the input. Automatically associated with the field via a generated id, ensuring screen readers announce it correctly.
`name`	`string`	—	The `name` attribute sent with form data on submission. Also used by the Form component to track field state and validation.
`type`	`'text' \| 'email' \| 'tel' \| 'url' \| 'password'`	`'text'`	The HTML input type. Controls browser validation behaviour and which virtual keyboard appears on mobile devices. Ignored when `multiline` is true.
`placeholder`	`string`	—	Hint text displayed inside the field when it is empty. Use it to show an example value -- never as a substitute for the label.
`multiline`	`boolean`	`false`	When true, renders a `<textarea>` instead of an `<input>`, allowing multi-row text entry. The textarea is vertically resizable by default.
`disabled`	`boolean`	`false`	Prevents user interaction and applies a muted visual treatment. The field value is excluded from form submission when disabled.
`required`	`boolean`	`false`	Marks the field as required. Displays a required indicator next to the label and triggers native constraint validation on form submission.
`value`	`string`	`''`	The current value of the input. Can be set programmatically to pre-fill the field or used for controlled-component patterns. Updated internally on each keystroke.
`rows`	`number`	`5`	Number of visible text rows when `multiline` is true. Controls the initial height of the textarea. Ignored for single-line inputs.
`error`	`string`	`''`	Error message displayed below the input. When set, the input border turns red and the error text appears.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls the input size. Options: 'sm', 'md', 'lg'.

Events

Event	Description
`arc-input`	Fired on each keystroke with { value } detail
`arc-change`	Fired on blur when value has changed