Input

A 60px text field with its label above and hint below, in four types: Multi-Purpose, Search, Password and Web Link. Square or pill, flat or with a shadow.

DesignReactVuePrompts

Copy

Field Title*

As it appears on your ID.

Verify

This is a hint text to help user.Info Here

1

2

3

4

5

6

7

8

9

10

import { Input } from '@orvain/react';
 
<Input
  label="Email address"
  placeholder="you@example.com"
  value={email}
  onValueChange={setEmail}
/>
<Input label="Email address" errorText="Enter a valid email address." />
<Input label="Username" pill leadingIcon={<UserIcon />} />

Add an empty Orvain Input titled “Field Title”, required, with the description “As it appears on your ID.”, the placeholder “Placeholder text...”, a “Verify” button and the hint “This is a hint text to help user.”

Orvain MCPIncluded with the library

When to use#

• For short free text: a name, an email, a search, a URL.
• The Password type for secrets, with a button that shows or hides them.
• The Web Link type for a URL that can be copied or verified in place.

When not to use

• Use a Text Area for more than one line of text.
• Use a Dropdown to choose from a known list.

Anatomy#

States#

Source#

Preview – final code pending

The Input is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published

Used in these blocks