Cal.com
DesignGitHub
Components

Input

View in AirtableView in Figma
Design:
Ready for dev
Dev:
Not started

States

Input fields in different states: default, disabled, and readonly.

default

sm
md

disabled

sm
md

readonly

sm
md

Types

Different types of input fields for various data types.

text

sm
md

email

sm
md

password

sm
md

number

sm
md

tel

sm
md

url

sm
md

search

sm
md

Widths

Input fields with different width configurations.

Size: sm

Full Width

Auto Width

Size: md

Full Width

Auto Width

With Values

Input fields with default values and placeholders.

Size: sm

Default Value

Placeholder

Size: md

Default Value

Placeholder

Previous

Form

Next

Navigation

On this page