Input Form element that allows users to input and edit text or data into a website page.

CSS Source

Controls

Value Value text.

Placeholder Placeholder text.

Input Type There are quite a few input types that share styles. Select requires a supplementary class.

Invalid Invalid state automatically shows if you use native HTML required/pattern attributes OR if you manually apply the .prs-input_invalid class. An optional error message can also automatically display without any extra coding logic (pure CSS).

Variant Ghost is a border-less & background-less alternate display for extreme cases.

Default Ghost

State These states will happen automatically when using valid sematic markup.

Default Focus Disabled

Properties Jump to heading

Class / Token	Type
`.prs-input`	Component	For <input> or <label>
`.prs-input-ghost`	Modifier	Remove border
`.prs-input_focus`	State	Manually apply visual focus
`.prs-input_invalid`	State	Manually apply visual invalid
`.prs-input_disabled`	State	Manually apply visual disabled

Note: Jump to heading

Use as a container:
.prs-input can also be used as a container to "weld" inputs + non-input elements together when used with the Form Control component structure. Please make sure that if you use this, your container can shrink down below 320px for smaller screens. See example below:

Input as a container

Example:

$ .00

<div class="prs-form-control">
  <div class="prs-label">
    <label for="contained-input" class="prs-label-text">Example:</label>
  </div>
  <label class="prs-input">
    <span class="prs-label-text">$</span>
    <input type="number" id="contained-input" placeholder="123" />
    <span class="prs-label-text">.00</span>
  </label>
</div>