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.
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.
import React from'react';import { PlusInput } from'@plusui/react';constInputWithStatuses= () => ( <> <PlusInputsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required > <islot="prefix"className="fa-solid fa-plus"></i> <islot="suffix"className="fa-solid fa-plus"></i> </PlusInput> <PlusInputerrorsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required > <islot="prefix"className="fa-solid fa-plus"></i> <islot="suffix"className="fa-solid fa-plus"></i> </PlusInput> </>);exportdefault InputWithStatuses;
<plus-inputsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required> <islot="prefix"class="fa-solid fa-plus"></i> <islot="suffix"class="fa-solid fa-plus"></i></plus-input><plus-inputerrorsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required> <islot="prefix"class="fa-solid fa-plus"></i> <islot="suffix"class="fa-solid fa-plus"></i></plus-input>
<template> <plus-inputsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required > <islot="prefix"class="fa-solid fa-plus"></i> <islot="suffix"class="fa-solid fa-plus"></i> </plus-input> <plus-inputerrorsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required > <islot="prefix"class="fa-solid fa-plus"></i> <islot="suffix"class="fa-solid fa-plus"></i> </plus-input></template>
<plus-inputsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required> <islot="prefix"class="fa-solid fa-plus"></i> <islot="suffix"class="fa-solid fa-plus"></i></plus-input><plus-inputerrorsize="md"label="Label"caption="There will be a caption text here"placeholder="Placeholder"required> <islot="prefix"class="fa-solid fa-plus"></i> <islot="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.
import React from'react';import { PlusInput } from'@plusui/react';constDefaultAndValueInput= () => ( <> <PlusInputsize="md"label="Default Input"placeholder="Type here..." /> {/* Default input */} <PlusInputsize="md"label="Input with Value"placeholder="Type here..."value="Predefined Value" {/* Input with a predefined value */} /> </>);exportdefault DefaultAndValueInput;
<plus-inputsize="md"label="Default Input"placeholder="Type here..."></plus-input> <!-- Default input --><plus-inputsize="md"label="Input with Value"placeholder="Type here..."value="Predefined Value"></plus-input> <!-- Input with a predefined value -->
<template> <plus-inputsize="md"label="Default Input"placeholder="Type here..." ></plus-input> <!-- Default input --> <plus-inputsize="md"label="Input with Value"placeholder="Type here..."value="Predefined Value" ></plus-input> <!-- Input with a predefined value --></template>
<plus-inputsize="md"label="Default Input"placeholder="Type here..."></plus-input> <!-- Default input --><plus-inputsize="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.
<plus-inputsize="sm"label="Small Input"placeholder="Type here..."></plus-input> <!-- Small size --><plus-inputsize="md"label="Medium Input"placeholder="Type here..."></plus-input> <!-- Medium size --><plus-inputsize="lg"label="Large Input"placeholder="Type here..."></plus-input> <!-- Large size -->
<template> <plus-inputsize="sm"label="Small Input"placeholder="Type here..." ></plus-input> <!-- Small size --> <plus-inputsize="md"label="Medium Input"placeholder="Type here..." ></plus-input> <!-- Medium size --> <plus-inputsize="lg"label="Large Input"placeholder="Type here..." ></plus-input> <!-- Large size --></template>
<plus-inputsize="sm"label="Small Input"placeholder="Type here..."></plus-input> <!-- Small size --><plus-inputsize="md"label="Medium Input"placeholder="Type here..."></plus-input> <!-- Medium size --><plus-inputsize="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.
import React from'react';import { PlusInput } from'@plusui/react';constInputWithDefaultAndDisabled= () => ( <> <PlusInputsize="md"label="Default Input"placeholder="Type here..." /> {/* Default state */} <PlusInputsize="md"label="Disabled Input"placeholder="Can't type here..."disabled {/* Disabled state */} /> </>);exportdefault InputWithDefaultAndDisabled;
<plus-inputsize="md"label="Default Input"placeholder="Type here..."></plus-input> <!-- Default state --><plus-inputsize="md"label="Disabled Input"placeholder="Can't type here..."disabled></plus-input> <!-- Disabled state -->
<template> <plus-inputsize="md"label="Default Input"placeholder="Type here..." ></plus-input> <!-- Default state --> <plus-inputsize="md"label="Disabled Input"placeholder="Can't type here..."disabled ></plus-input> <!-- Disabled state --></template>
<plus-inputsize="md"label="Default Input"placeholder="Type here..."></plus-input> <!-- Default state --><plus-inputsize="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.
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.
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.