Plus UI ↗️ Be Our Sponsor ↗️

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.

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.

StatusStatesSizeDisabled

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.

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;

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.

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;

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.

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;

Disabled

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

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;

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.

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.

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.

CriteriaDescriptionStatus

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

LogoPlus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma

API

PropertyDescriptionTypeAccepted ValuesDefault

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

PreviousDropdownNextLink

Last updated