Sadrazam – Form Elements Showcase

Inputs, textareas, selects, checkboxes, radios, switches, fieldsets, patterns and states

Text Inputs

Base input styles applied to all input, textarea, and select elements globally

Text
input[type="text"]
Email
input[type="email"]
Password
input[type="password"]
URL
input[type="url"]
Search
input[type="search"]
Tel
input[type="tel"]
Date
input[type="date"]
Time
input[type="time"]

Number Input

Spinner buttons hidden by default; use .with-spinner to show them

Default (no spinner)
input[type="number"]
With Spinner
input[type="number"].with-spinner

Textarea

Full-width textarea with optional .autoexpand class

Default
textarea
Autoexpand
textarea.autoexpand

Select

Custom dropdown arrow icon, hover/focus states, and disabled variant

Default
select
With Selection
select
Disabled
select:disabled

Disabled States

All form elements support [disabled] attribute with reduced opacity and not-allowed cursor

Disabled Text
input[disabled]
Disabled Textarea
textarea[disabled]
Disabled Select
select[disabled]

Error State

Add .is-error to highlight invalid fields with a red border

Error Input
.is-error
Error Textarea
.is-error
Error Select
.is-error

Checkbox

Custom styled checkbox with checkmark — checked, unchecked, and disabled states

Unchecked input[type="checkbox"]
Checked input[type="checkbox"]:checked
Disabled input[type="checkbox"]:disabled
Disabled + Checked input[type="checkbox"]:disabled:checked

Radio Buttons

Custom styled radio with inner dot — supports .block variant for display:block

Default (inline) input[type="radio"]
Disabled input[type="radio"]:disabled
Block Variant input[type="radio"].block

Switch / Toggle

Toggle switch component with .slider.round for rounded variant

Off .switch > .slider.round
On .switch > .slider.round (checked)
Square Slider .switch > .slider
Switch Container
Enable notifications
Dark mode
.switch-container

Fieldset & Legend

Fieldset resets padding/margin/border; use legend.styled for a bordered section title

Default Fieldset
fieldset (reset: no border, no padding, no margin)
Styled Legend
Personal Information
legend.styled

Password Visibility Toggle

Wrap input and button in .form-input--password

Toggle Password
.form-input--password

Label-Input Combo Type One

Label on top with shared background, bottom-border input — .form-theme--filled

Text Input
.form-theme--filled
Email Input
.form-theme--filled
Checkbox Type One
.form-field--checkbox

Label-Input Combo Type Two

Label on top, standard bordered input below — label + .form-text-label

Text Input
label + .form-text-label
Password Input
label + .form-text-label
Checkbox Type Two
.form-field--checkbox

Input Helper Text

Descriptive text below form fields — with optional question mark prefix

Default Helper
We will never share your email with anyone else.
.form-text-help
Helper with ? Mark
Password must be at least 8 characters long and contain at least one number.
.form-text-help--with-mark

Form Divider

Section heading with a line extending to the right — .form-divider

Account Details
Security
Preferences
.form-divider

Form Standard Style

Form layout carrier — flex + gap on the direct parent of the fields — .form-layout--stack

Notification Settings
.form-layout--stack

HTML Button Element (Base Style)

Base button element reset — inline-flex, centered, rounded, with disabled state

Default Button button
Disabled Button button[disabled]

Complete Form Example

All elements combined into a realistic registration form

Personal Info
Security
Must be at least 8 characters with one uppercase letter and one number.
Preferences
Maximum 280 characters.
Communication
Theme:
I agree to the Terms of Service

Dark Background Preview

Form elements on a dark surface

Text Input
Select
Checkbox
Radio
Switch