Input

The input component allows users to enter and edit text.

The Input component is a versatile UI element used to capture user input, such as text or numbers. It offers various customization options and states to ensure a seamless user experience in your applications.

Anatomy

The anatomy of an input component includes the input field itself, a container to frame the input, and optional elements like labels and icons that assist in user interaction and information conveyance.

anatomy of input component

Properties

Input components typically have properties like type (e.g., text fields, checkboxes), labels, placeholders, value, read-only and disabled states, required fields, validation rules, and events. These components offer a means to capture user data, provide feedback, and ensure accessibility and security while enhancing the overall user experience.

Status	States	Size	Disabled
Default	Default	Small	True
Error	Hover	Medium	False
	Fill	Large
	Fill-hover
	Press

Status

• Default input component is the standard, regular input field for user data entry.

• Error input is an input field that indicates an error, often with a highlighted border or error message, when user input is incorrect or doesn't meet validation criteria.

React

import React from 'react';
import { PlusInput } from '@plusui/react';

const InputWithStatuses = () => (
  <>
    <PlusInput
      size="md"
      label="Label"
      caption="There will be a caption text here"
      placeholder="Placeholder"
      required
    >
      <i slot="prefix" className="fa-solid fa-plus"></i>
      <i slot="suffix" className="fa-solid fa-plus"></i>
    </PlusInput>

    <PlusInput
      error
      size="md"
      label="Label"
      caption="There will be a caption text here"
      placeholder="Placeholder"
      required
    >
      <i slot="prefix" className="fa-solid fa-plus"></i>
      <i slot="suffix" className="fa-solid fa-plus"></i>
    </PlusInput>
  </>
);

export default InputWithStatuses;

Angular

<plus-input
  size="md"
  label="Label"
  caption="There will be a caption text here"
  placeholder="Placeholder"
  required
>
  <i slot="prefix" class="fa-solid fa-plus"></i>
  <i slot="suffix" class="fa-solid fa-plus"></i>
</plus-input>

<plus-input
  error
  size="md"
  label="Label"
  caption="There will be a caption text here"
  placeholder="Placeholder"
  required
>
  <i slot="prefix" class="fa-solid fa-plus"></i>
  <i slot="suffix" class="fa-solid fa-plus"></i>
</plus-input>

Vue

<template>
  <plus-input
    size="md"
    label="Label"
    caption="There will be a caption text here"
    placeholder="Placeholder"
    required
  >
    <i slot="prefix" class="fa-solid fa-plus"></i>
    <i slot="suffix" class="fa-solid fa-plus"></i>
  </plus-input>

  <plus-input
    error
    size="md"
    label="Label"
    caption="There will be a caption text here"
    placeholder="Placeholder"
    required
  >
    <i slot="prefix" class="fa-solid fa-plus"></i>
    <i slot="suffix" class="fa-solid fa-plus"></i>
  </plus-input>
</template>

Javascript

<plus-input
  size="md"
  label="Label"
  caption="There will be a caption text here"
  placeholder="Placeholder"
  required
>
  <i slot="prefix" class="fa-solid fa-plus"></i>
  <i slot="suffix" class="fa-solid fa-plus"></i>
</plus-input>

<plus-input
  error
  size="md"
  label="Label"
  caption="There will be a caption text here"
  placeholder="Placeholder"
  required
>
  <i slot="prefix" class="fa-solid fa-plus"></i>
  <i slot="suffix" class="fa-solid fa-plus"></i>
</plus-input>

States

• Default input state is component in its initial state, ready for user interaction.

• Hover input is the appearance of an input component when a user hovers their mouse cursor over it, which can include visual changes like a highlighted background.

• Fill input is component with content or data already filled in, which users can edit or modify as needed.

• Fill-Hover input is a combination of the "Fill Input" and "Hover Input" states, indicating the appearance when the cursor hovers over a filled input.

• Press input is how an input component looks when a user clicks or presses on it, often indicating that it's currently being interacted with.

React

import React from 'react';
import { PlusInput } from '@plusui/react';

const DefaultAndValueInput = () => (
  <>
    <PlusInput size="md" label="Default Input" placeholder="Type here..." />  {/* Default input */}

    <PlusInput
      size="md"
      label="Input with Value"
      placeholder="Type here..."
      value="Predefined Value"  {/* Input with a predefined value */}
    />
  </>
);

export default DefaultAndValueInput;

Angular

<plus-input
  size="md"
  label="Default Input"
  placeholder="Type here..."
></plus-input>  <!-- Default input -->

<plus-input
  size="md"
  label="Input with Value"
  placeholder="Type here..."
  value="Predefined Value"
></plus-input>  <!-- Input with a predefined value -->

Vue

<template>
  <plus-input
    size="md"
    label="Default Input"
    placeholder="Type here..."
  ></plus-input>  <!-- Default input -->

  <plus-input
    size="md"
    label="Input with Value"
    placeholder="Type here..."
    value="Predefined Value"
  ></plus-input>  <!-- Input with a predefined value -->
</template>

Javascript

<plus-input
  size="md"
  label="Default Input"
  placeholder="Type here..."
></plus-input>  <!-- Default input -->

<plus-input
  size="md"
  label="Input with Value"
  placeholder="Type here..."
  value="Predefined Value"
></plus-input>  <!-- Input with a predefined value -->

Size

• Small input is a smaller-sized input component, typically used for compact forms or in specific design contexts.

• Medium input is a standard-sized input component, suitable for most data entry scenarios.

• Large input is a larger-sized input field, often used when more space is needed for user input or for a prominent display.

React

import React from 'react';
import { PlusInput } from '@plusui/react';

const InputWithSizes = () => (
  <>
    <PlusInput size="sm" label="Small Input" placeholder="Type here..." />  {/* Small size */}

    <PlusInput size="md" label="Medium Input" placeholder="Type here..." />  {/* Medium size */}

    <PlusInput size="lg" label="Large Input" placeholder="Type here..." />  {/* Large size */}
  </>
);

export default InputWithSizes;

Angular

<plus-input
  size="sm"
  label="Small Input"
  placeholder="Type here..."
></plus-input>  <!-- Small size -->

<plus-input
  size="md"
  label="Medium Input"
  placeholder="Type here..."
></plus-input>  <!-- Medium size -->

<plus-input
  size="lg"
  label="Large Input"
  placeholder="Type here..."
></plus-input>  <!-- Large size -->

Vue

<template>
  <plus-input
    size="sm"
    label="Small Input"
    placeholder="Type here..."
  ></plus-input>  <!-- Small size -->

  <plus-input
    size="md"
    label="Medium Input"
    placeholder="Type here..."
  ></plus-input>  <!-- Medium size -->

  <plus-input
    size="lg"
    label="Large Input"
    placeholder="Type here..."
  ></plus-input>  <!-- Large size -->
</template>

Javascript

<plus-input
  size="sm"
  label="Small Input"
  placeholder="Type here..."
></plus-input>  <!-- Small size -->

<plus-input
  size="md"
  label="Medium Input"
  placeholder="Type here..."
></plus-input>  <!-- Medium size -->

<plus-input
  size="lg"
  label="Large Input"
  placeholder="Type here..."
></plus-input>  <!-- Large size -->

Disabled

Disabled input is an input component that cannot be interacted with by the user, often used when certain conditions or permissions prevent input.

React

import React from 'react';
import { PlusInput } from '@plusui/react';

const InputWithDefaultAndDisabled = () => (
  <>
    <PlusInput size="md" label="Default Input" placeholder="Type here..." />  {/* Default state */}

    <PlusInput
      size="md"
      label="Disabled Input"
      placeholder="Can't type here..."
      disabled  {/* Disabled state */}
    />
  </>
);

export default InputWithDefaultAndDisabled;

Angular

<plus-input
  size="md"
  label="Default Input"
  placeholder="Type here..."
></plus-input>  <!-- Default state -->

<plus-input
  size="md"
  label="Disabled Input"
  placeholder="Can't type here..."
  disabled
></plus-input>  <!-- Disabled state -->

Vue

<template>
  <plus-input
    size="md"
    label="Default Input"
    placeholder="Type here..."
  ></plus-input>  <!-- Default state -->

  <plus-input
    size="md"
    label="Disabled Input"
    placeholder="Can't type here..."
    disabled
  ></plus-input>  <!-- Disabled state -->
</template>

Javascript

<plus-input
  size="md"
  label="Default Input"
  placeholder="Type here..."
></plus-input>  <!-- Default state -->

<plus-input
  size="md"
  label="Disabled Input"
  placeholder="Can't type here..."
  disabled
></plus-input>  <!-- Disabled state -->

Layout & Spacing

Layout and spacing in input components influence user interface clarity. Consistent spacing and alignment help organize input fields, leading to a more user-friendly and visually cohesive design.

layout and spacing of input component

Light & Dark Mode

Supporting light and dark modes is essential for user interface adaptability. Proper color choices and contrast adjustments ensure readability and comfort for users in different lighting conditions.

light and dark mode of input component

Accessibility

Input components must prioritize accessibility for users with disabilities. This includes clear labels, logical tab order, color contrast, ARIA roles, and keyboard navigation, fostering inclusivity and usability for all.

Criteria	Description	Status
Autocomplete Attribute	Ensure the autocomplete attribute is correct and suitable for the form field	Passed
ID Attribute	Ensures every id attribute value is unique	Passed
Active Elements	Ensures every id attribute value of active elements is unique	Passed
Form Elements	Ensures form field does not have multiple label elements	Passed
Visible Labels	Ensures that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes	Passed
Tabindex Attribute	Ensures tabindex attribute values are not greater than 0	Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.	AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
type	Input type	String	text, email, password, number, tel, url	text
size	Input size	String	sm, md, lg	md
disabled	Input disabled	Boolean	true, false	false
readonly	Input readonly	Boolean	true, false	false
required	Input required	Boolean	true, false	false
value	Input value	String
name	Input name	String
placeholder	Input placeholder	String
label	Input label	String
caption	Input caption	String
error	Input error text	String
clearable	Input clearable	Boolean	true, false	false