Sadrazam – Form Patterns Showcase

Label combos, helper text, dividers, input groups, and standard form layout

.is-error

Applies a red border to any input in an error state

Normal
Error
.is-error

.form-input--password

Password input with a show/hide toggle button positioned inside the field

Password
.form-input--password
With Error
.form-input--password + .is-error

.form-theme--filled

Label above, input below, shared grey background with bottom border focus effect

Text Input
.form-theme--filled
With Value
With Warning
*[data-type="warningMessage"]

.form-field--checkbox

Checkbox with label, flex layout, cursor pointer, user-select none

Checkbox
.form-field--checkbox
Checked
With Warning
*[data-type="warningMessage"]

.form-text-help

Small descriptive text below form fields, with an optional question-mark variant

Basic
Must be at least 8 characters with one uppercase letter and one number.
.form-text-help
With ? Mark
Your Tax ID is a unique number assigned by the tax authority. You can find it on your tax return or official correspondence.
.form-text-help--with-mark
Type One + Helper
This will be visible to other users on the platform.
Type One + ? Mark
If you were referred by another user, enter their referral code here to receive a bonus.

.form-divider

Section heading with a horizontal line extending to the right — used to separate form sections

Default
Personal Information
Contact Details
Preferences
Class .form-divider

.form-layout--{tarz}

Form layout carrier — flex + gap. Put it on the element whose DIRECT children are the fields (gap does not reach deeper). Today one style: --regular (16px). .form-layout--stack is deprecated (adjacent-sibling margin).

With Layout
Account Setup
Must be at least 8 characters.
Profile
Notifications
Class .form-layout--stack

.form-fieldset

Base fieldset class — legend spacing. Structure: <fieldset> → <legend> (optional) → <div> → content

Base
Multi-language Field
🇹🇷
🇬🇧
Class .form-fieldset

.form-choices--stack / .form-choices--row

Option list rhythm. The fieldset carries no layout — the list wrapper does. --stack lists options vertically, --row side by side.

Inline
Invoice Type
Gender
Class .form-fieldset > .form-choices--row | .form-choices--stack

.form-text-hint

Small, subtle hint text inside labels — typically used for "(optional)" notes

Usage
Class .form-text-hint

Complete Form Example

All form pattern classes used together in a realistic registration form

Account
Use at least 8 characters, mixing letters, numbers, and symbols for better security.
Personal Info
Optional. This helps us personalize your experience.
Agreements