Forms

Input Fields

Preview

Email address

name@bauer-group.com

Focused field

Karl Bauer

Validation — Preview

Valid

karl@bauer-group.com

Invalid

invalid-email

Please enter a valid email address.

Specification

Property	Value
Padding	12px 16px
Border	1.5px solid #E4E4E7
Border-Radius	10px
Font-Size	14px
Focus-Border	#FF8500
Focus-Shadow	0 0 0 3px rgba(255, 133, 0, 0.12)

CSS

.input {
  padding: 12px 16px;
  border: 1.5px solid #E4E4E7;
  border-radius: 10px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  background: white;
  color: #18181B;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.input:focus {
  border-color: #FF8500;
  box-shadow: 0 0 0 3px rgba(255, 133, 0, 0.12);
}

.input::placeholder {
  color: #A1A1AA;
}

Labels

.label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #52525B;
  margin-bottom: 6px;
  display: block;
}

Validation

Status	Border color	Preview	Use case
Default	#E4E4E7		Default state
Focus	#FF8500		Active field
Success	#22C55E		Valid input
Error	#EF4444		Invalid input

Error messages

Error messages are displayed below the field in error red (#EF4444) at 12px font size.