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 .form-input--error to highlight invalid fields with a red border

Error Input
.form-input--error
Error Textarea
.form-input--error
Error Select
.form-input--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-toggle-password-visibility

Toggle Password
.form-toggle-password-visibility

Label-Input Combo Type One

Label on top with shared background, bottom-border input — .form-field--top-label

Text Input
.form-field--top-label
Email Input
.form-field--top-label
Checkbox Type One
.form-field--checkbox

Label-Input Combo Type Two

Label on top, standard bordered input below — .label-text-input-type-two

Text Input
.label-text-input-type-two
Password Input
.label-text-input-type-two
Checkbox Type Two
.label-checkbox-input-type-two

Input Helper Text

Descriptive text below form fields — with optional question mark prefix

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

Form Divider

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

Account Details
Security
Preferences
.form-divider

Form Standard Style

Standard form layout with consistent spacing between labels, fieldsets, and panels — .form-layout--standard

Notification Settings
.form-layout--standard

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