Input

Text input field component with validation, icons, and various input types.

Import

import { Input } from '@primitivekit/vanilla';

const input = new Input({ /* options */ });
document.body.appendChild(input.element);

No props available.

The Input component supports CSS variables for complete customization:

const input = new Input({
  style: {
    '--input-bg-color': '#007bff',
    '--input-text-color': '#ffffff'
  }
});

The following design tokens are available for customization:

The Input component is fully accessible and follows WCAG 2.1 AA standards:

Button - Interactive button component with multiple variants, sizes, and states for triggering actions.
Select - Dropdown component for selecting one or multiple options from a list.
Checkbox - Form input component for selecting one or multiple options from a set.
Radio - Form input component for selecting a single option from a set of mutually exclusive choices.
Switch - Toggle component for switching between two states, typically on/off or enabled/disabled.