Inputs
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 Verify 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 Verify 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
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Inputs
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 Verify 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 Verify 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
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.