Inputs
Inputs are single-line fields for a typed value: a header that names the field, a shell with room at either end for a mark or an action, and a footer that reports what the value earned. The eight blocks here are one shell doing eight jobs, among them a search that narrows a list as you type, a masked password with its rules underneath, a phone number split from its dialling code, a card number, a URL with a chosen scheme, and a read-only link with a copy control.
The shape of the value decides the field, and that shape is rarely typed. Card digits regroup once the number names its issuer, 4-4-4-4 for most and 4-6-5 for Amex, and a phone number regroups when the country changes, so part of each of those fields is a chooser rather than a keyboard. Error state then belongs only to the segment that can be wrong: a dialling code is never invalid, and tinting it because the number beside it is points at the wrong thing.
Multi-purpose field
Best for
The field most of a form is made of: a value with a chooser and an action welded to it
Anatomy
Envelope in the lead · the address · a primary at the end, its radius the shell's less its own inset · the error the value earns
Search field
Best for
Narrowing a list you are already looking at
Anatomy
Magnifier in the lead · a clear once there is something to clear · the filter in its own bordered box at the end · the people under it, initials, name and address, narrowing as you type
Password field
Best for
Setting a password, where the rules have to be visible while they are being broken
Anatomy
Padlock in the lead · the value masked · an eye that reveals it and hides it again · the strength block under it: a four-segment bar, the caption, then a row per rule with its own mark, grey untried, green met, crossed while not
- At least 1 uppercase
- At least 1 number
- At least 8 characters
- At least 1 symbol
Phone number field
Best for
A number that means nothing without the country in front of it
Anatomy
Two boxes welded: the dialling code its own segment on the left, the number and its Verify sharing the box on the right · only that box carries the state, since a dialling code cannot be invalid · digits regrouped to the country chosen
Currency field
Best for
An amount, where the unit is as editable as the number
Anatomy
The phone field mirrored: the amount and its Save lead, the currency segment trails · the symbol follows the currency · only the value's box carries the state
Card field
Best for
Taking a card, where the issuer decides the shape of the number
Anatomy
No lead at all · digits grouped to the issuer, 4-4-4-4 or Amex's 4-6-5 · one provider mark at the end, blank until the number names an issuer
Web link field
Best for
A URL going in, with the scheme chosen rather than typed
Anatomy
The scheme its own fixed segment on the left · the address and its Check sharing the box on the right · the footer reporting what the check found
Share link field
Best for
A generated link coming out: read-only, because the only thing to do with it is take it
Anatomy
Link mark in the lead · the value read-only on the muted surface · the copy its own bordered box welded to the right, as the source draws it · expiry in the footer
Using Inputs
Reach for it when
- Any short value on one line: a name, an email, an amount, a search term
- A value with a fixed prefix or unit the person picks instead of typing
- Password creation, where the rules must stay visible while they are being broken
- A generated value the person only needs to copy out
Reach for something else when
- More than a line or two of prose: a text area that grows lets people see what they wrote
- A value from a known list: a select or combobox, since free text people must spell exactly is a validation problem you created
- A date or a time: a picker that understands months beats a field that has to parse them
Where it shows up
Checkout card entry
A payment form where the number regroups as the issuer becomes clear and a provider mark appears at the trailing edge, so the person can see the number was understood before they submit anything.
International sign-up
A registration form taking a phone number from anywhere. The dialling code is a segment the person picks, the digits regroup to the country chosen, and Verify sits inside the box holding the number.
Directory search
A field above a list of people that filters as characters are typed, with a clear control once there is something to clear and a filter box at the trailing edge for narrowing by attribute.
Share link handoff
A generated URL shown read-only on a muted surface with a copy control welded to its edge, and the expiry stated in the footer so nobody sends out a link that is already dead.
Questions
Can placeholder text replace a field label?
No. Placeholder text disappears the moment someone starts typing, which removes the only description of the field exactly when it is being filled in, and it leaves nothing to check against when a completed form is reviewed before submission. Keep a persistent label above the field, and use the placeholder for an example of the expected format if you use it at all.
Should a text input validate on every keystroke or when it loses focus?
Validate first when the field loses focus, so a half-typed email is not marked wrong while it is still being typed. Once a field has already shown an error, switch to validating on each keystroke so the error clears the moment it is fixed rather than at the next blur. Password rules are the exception: they are a checklist being satisfied, so they update live.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPInputs
Inputs are single-line fields for a typed value: a header that names the field, a shell with room at either end for a mark or an action, and a footer that reports what the value earned. The eight blocks here are one shell doing eight jobs, among them a search that narrows a list as you type, a masked password with its rules underneath, a phone number split from its dialling code, a card number, a URL with a chosen scheme, and a read-only link with a copy control.
The shape of the value decides the field, and that shape is rarely typed. Card digits regroup once the number names its issuer, 4-4-4-4 for most and 4-6-5 for Amex, and a phone number regroups when the country changes, so part of each of those fields is a chooser rather than a keyboard. Error state then belongs only to the segment that can be wrong: a dialling code is never invalid, and tinting it because the number beside it is points at the wrong thing.
Multi-purpose field
Best for
The field most of a form is made of: a value with a chooser and an action welded to it
Anatomy
Envelope in the lead · the address · a primary at the end, its radius the shell's less its own inset · the error the value earns
Search field
Best for
Narrowing a list you are already looking at
Anatomy
Magnifier in the lead · a clear once there is something to clear · the filter in its own bordered box at the end · the people under it, initials, name and address, narrowing as you type
Password field
Best for
Setting a password, where the rules have to be visible while they are being broken
Anatomy
Padlock in the lead · the value masked · an eye that reveals it and hides it again · the strength block under it: a four-segment bar, the caption, then a row per rule with its own mark, grey untried, green met, crossed while not
- At least 1 uppercase
- At least 1 number
- At least 8 characters
- At least 1 symbol
Phone number field
Best for
A number that means nothing without the country in front of it
Anatomy
Two boxes welded: the dialling code its own segment on the left, the number and its Verify sharing the box on the right · only that box carries the state, since a dialling code cannot be invalid · digits regrouped to the country chosen
Currency field
Best for
An amount, where the unit is as editable as the number
Anatomy
The phone field mirrored: the amount and its Save lead, the currency segment trails · the symbol follows the currency · only the value's box carries the state
Card field
Best for
Taking a card, where the issuer decides the shape of the number
Anatomy
No lead at all · digits grouped to the issuer, 4-4-4-4 or Amex's 4-6-5 · one provider mark at the end, blank until the number names an issuer
Web link field
Best for
A URL going in, with the scheme chosen rather than typed
Anatomy
The scheme its own fixed segment on the left · the address and its Check sharing the box on the right · the footer reporting what the check found
Share link field
Best for
A generated link coming out: read-only, because the only thing to do with it is take it
Anatomy
Link mark in the lead · the value read-only on the muted surface · the copy its own bordered box welded to the right, as the source draws it · expiry in the footer
Using Inputs
Reach for it when
- Any short value on one line: a name, an email, an amount, a search term
- A value with a fixed prefix or unit the person picks instead of typing
- Password creation, where the rules must stay visible while they are being broken
- A generated value the person only needs to copy out
Reach for something else when
- More than a line or two of prose: a text area that grows lets people see what they wrote
- A value from a known list: a select or combobox, since free text people must spell exactly is a validation problem you created
- A date or a time: a picker that understands months beats a field that has to parse them
Where it shows up
Checkout card entry
A payment form where the number regroups as the issuer becomes clear and a provider mark appears at the trailing edge, so the person can see the number was understood before they submit anything.
International sign-up
A registration form taking a phone number from anywhere. The dialling code is a segment the person picks, the digits regroup to the country chosen, and Verify sits inside the box holding the number.
Directory search
A field above a list of people that filters as characters are typed, with a clear control once there is something to clear and a filter box at the trailing edge for narrowing by attribute.
Share link handoff
A generated URL shown read-only on a muted surface with a copy control welded to its edge, and the expiry stated in the footer so nobody sends out a link that is already dead.
Questions
Can placeholder text replace a field label?
No. Placeholder text disappears the moment someone starts typing, which removes the only description of the field exactly when it is being filled in, and it leaves nothing to check against when a completed form is reviewed before submission. Keep a persistent label above the field, and use the placeholder for an example of the expected format if you use it at all.
Should a text input validate on every keystroke or when it loses focus?
Validate first when the field loses focus, so a half-typed email is not marked wrong while it is still being typed. Once a field has already shown an error, switch to validating on each keystroke so the error clears the moment it is fixed rather than at the next blur. Password rules are the exception: they are a checklist being satisfied, so they update live.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
