Card field, one line

Taking number, expiry and security code in one go.

Get Pro to installPro24 blocksReact, Vue and Figma

MCP

Card details

We never store the full number.

Visa, Mastercard and American Express.

More in Input blocks#

Multi-purpose field

The field most of a form is made of: a value with a chooser and an action welded to it

Multi-purpose field, batch

Inviting several people at once, where one typo should not cost the rest

Multi-purpose field, pending

Inviting one person and seeing the invite wait

Search field

Narrowing a list you are already looking at

Search field, scopes

Narrowing by something other than the words typed

Search field, facets

Narrowing by one category, with the counts in sight

Password field

Setting a password, where the rules have to be visible while they are being broken

Password field, ring

Setting a password with less to read

Password field, suggest

Setting a password the person should not have to invent

Phone number field

A number that means nothing without the country in front of it

Phone number field, detect

A number typed in one go, with its country

Phone number field, code

Confirming a number with the code we texted

Currency field

An amount, where the unit is as editable as the number

Currency field, convert

Showing an amount in other currencies before choosing one

Currency field, limit

A spending limit against a cap, where the cap is the point

Card field

Taking a card, where the issuer decides the shape of the number

Card field, one line

Taking number, expiry and security code in one go

Card field, card face

Taking a card where seeing it helps

Web link field

A URL going in, with the scheme chosen rather than typed

Web link field, preview

A link whose destination is worth seeing before it is saved

Web link field, tidy

A pasted link that carries tracking it should not

Share link field

A generated link coming out: read-only, because the only thing to do with it is take it

Share link field, access

A share link whose audience and lifetime are part of the choice

Share link field, stretch

A share link where the copy is the moment

When to use#

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

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in Blocks See plans