Input
Versatile form control supporting single-line text, email, password, and multiline textarea modes with built-in label, placeholder, and validation states. Pairs with Form for complete data-entry workflows.
<arc-input>Overview
Input is the foundational text-entry component in ARC UI. It wraps a native <input> or <textarea> element with consistent styling, an integrated label, placeholder support, and validation feedback. All of it goes through a single declarative API.
Use Input whenever you need to collect freeform text from a user: names, emails, passwords, search queries, or longer messages. The multiline prop switches the underlying element to a <textarea> for multi-row content without changing the component interface, so forms stay uniform whether a field needs one line or twenty.
Input supports prefix and suffix slots for placing icons, labels, or other inline elements inside the field box. This is useful for search icons, unit labels, clear buttons, or any adornment that should appear visually attached to the input.
Input works with the Form component. Wrap a set of Inputs inside a Form to get coordinated validation, submission handling, and error summary. Each Input exposes name, required, and type props that Form reads automatically, so you rarely need extra wiring.
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';
export default function Example() {
return (
<>
<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;">
<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>
`,
})
export class ContactFormComponent {}import { Input } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<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';
export default function Example() {
return (
<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
autoValidatesbooleanfalse- Runs its own constraint logic and owns the whole validity flag set.
namestring''- The
nameattribute sent with form data on submission. Also used by the Form component to track field state and validation. labelstring''- Visible label rendered above the input. Automatically associated with the field via a generated id, ensuring screen readers announce it correctly.
placeholderstring''- Hint text displayed inside the field when it is empty. Use it to show an example value, never as a substitute for the label.
valuestring''- 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.
disabledbooleanfalse- Prevents user interaction and applies a muted visual treatment. The field value is excluded from form submission when disabled.
errorstring''- Error message displayed below the input. When set, the input border turns red and the error text appears.
rowsnumber5- Number of visible text rows when
multilineis true. Controls the initial height of the textarea. Ignored for single-line inputs. type'text' | 'email' | 'tel' | 'url' | 'password''text'- The HTML input type. Controls browser validation behavior and which virtual keyboard appears on mobile devices. Ignored when
multilineis true. multilinebooleanfalse- When true, renders a
<textarea>instead of an<input>, allowing multi-row text entry. The textarea is vertically resizable by default. requiredbooleanfalse- Marks the field as required. Displays a required indicator next to the label and triggers native constraint validation on form submission.
readonlybooleanfalse- Prevents the user from editing the value while keeping the field focusable, and the value is still submitted with the form.
size'sm' | 'md' | 'lg''md'- Controls the input size. Options: 'sm', 'md', 'lg'.
formAssociatedbooleantruepropertiesobject{ // flag(), unlike `disabled`. The exclusion in props.js is specifically // about form-associated *platform* semantics: a `disabled` content // attribute that is merely present makes the element actually disabled // per the HTML spec, and formDisabledCallback assigns the property back, // so no converter can win. Neither of these is platform-mapped: // `required` is enforced by _computeValidity() below and `readonly` by // each component's own interaction handlers, so the stock converter buys // nothing here and costs the usual bug: `required="false"` read as true, // blocking submission of a form the author meant to leave optional. // Finding #48's shape, across all 26 form controls at once. required: flag(false), readonly: flag(false), }- Lit merges static properties up the prototype chain, so every consumer
gets these without declaring them.
requiredparticipates in constraint validation below;readonlyreflects for styling and is enforced by each component's interaction handlers (the mixin can't know which gestures mutate state). formvalidityvalidationMessage
Methods
checkValidity()boolean- Whether the control currently satisfies its constraints, per the native
constraint-validation API. Fires
invalidon the element when it does not, and reports nothing to the user. reportValidity()boolean- As checkValidity(), but also shows the browser's validation message against the control when it fails.
Events
arc-inputdetail:{ value: string }- Fired on each keystroke with { value } detail
arc-changedetail:{ value: string }- Fired on blur when value has changed
See Also
- TextareaMulti-line text input with integrated label, placeholder, resize control, and live character count that turns red at the limit.
- SelectDropdown select with searchable options, keyboard navigation, and full ARIA listbox semantics for accessible form inputs.
- ComboboxSearchable dropdown with type-ahead filtering.
- Number InputA numeric stepper input with decrement and increment buttons flanking a central text field, supporting min/max clamping, step increments, and keyboard shortcuts.
- FormForm wrapper with built-in validation, error aggregation, and submit handling. Composes Input, Textarea, and Button into a cohesive data-entry workflow.
- FrameworksGuide