wiremd

Appearance

Form Controls Showcase ​

Use Case: Comprehensive demonstration of all form input types and controls.

Key Features: Text inputs, selections, checkboxes, radios, buttons, validation states, layouts

1. Text Inputs ​

Basic Text Inputs ​

Username
[_____________________________]

Email
[_____________________________] {type:email}

Password
[********] {type:password}

Confirm Password
[********] {type:password}

Input Width Variations ​

Zip Code
[_____]

Phone Number
[_______________]

Full Name
[_____________________________]

Specialized Input Types ​

Website URL
[https://___________] {type:url}

Phone Number
[_____________________________] {type:tel}

Date of Birth
[_____________________________] {type:date}

Time
[_____________________________] {type:time}

Number
[1___] {type:number min:1 max:100}

Search
[Search...___________] {type:search}

2. Textarea ​

Multi-line Text Areas ​

Short Comment
[Enter your comment...] {rows:3}

Long Description
[Write detailed description...] {rows:6}

Code Snippet
[Paste code here...] {rows:8 cols:60}

3. Checkboxes ​

Single Checkbox ​

- [x] I agree to the Terms of Service
- [ ] Subscribe to newsletter

Checkbox Groups ​

Select your interests:
- [x] Web Development
- [x] Mobile Development
- [ ] Data Science
- [ ] Machine Learning
- [ ] DevOps
- [ ] UI/UX Design

4. Radio Buttons ​

Basic Radio Group ​

Account Type:
- (*) Personal
- ( ) Business
- ( ) Enterprise

Radio with Descriptions ​

Subscription Plan:
- (*) Free - Basic features for individuals
- ( ) Pro ($29/mo) - Advanced features for professionals
- ( ) Team ($99/mo) - Collaboration tools for teams
- ( ) Enterprise (Custom) - Full-featured for organizations

5. Select Dropdowns ​

Basic Select ​

Country
[Select country...v]
- United States
- Canada
- United Kingdom
- Australia
- Other

Multiple Selects ​

Skills (Select multiple)
[Choose skills...v]
- JavaScript
- Python
- Java
- C++
- Ruby
- Go

Time Zone
[Select timezone...v]
- (GMT-8) Pacific Time
- (GMT-5) Eastern Time
- (GMT) London
- (GMT+1) Paris

6. Buttons ​

Button Types ​

[Default Button]

[Primary Button]*

[Secondary Button]{.outline}

Button Groups ​

[Save] [Cancel] [Reset]

[Cut] [Copy] [Paste]

[Bold] [Italic] [Underline]

7. Input States ​

Required Fields ​

Full Name
[_____________________________] {required:true}

Email
[_____________________________] {type:email required:true}

Disabled Fields ​

Username (Cannot be changed)
[johndoe___________] {state:disabled}

Email (Verified)
[john@example.com___________] {type:email state:disabled}

Error States ​

Invalid Email
[not-an-email___________] {state:error}
*Please enter a valid email address*

Password Too Short
[123___] {type:password state:error}
*Password must be at least 8 characters*

8. Form Layouts ​

Vertical Form (Default) ​

::: card
### Contact Form

Full Name
[_____________________________] {required:true}

Email
[_____________________________] {type:email required:true}

Phone
[_____________________________] {type:tel}

Message
[Your message...] {rows:5 required:true}

[Submit]* [Clear]
:::

Two-Column Form Layout ​

::: grid-2

### Left Column

First Name
[_____________________________] {required:true}

Email
[_____________________________] {type:email required:true}

Phone
[_____________________________] {type:tel}

### Right Column

Last Name
[_____________________________] {required:true}

Date of Birth
[_____________________________] {type:date}

Country
[Select country...v]

:::

9. Complex Form Example ​

Complete Registration Form ​

::: card
### Create Account

::: grid-2

### Login Information

Email Address
[_____________________________] {type:email required:true}

Username
[_____________________________] {required:true}

Password
[********] {type:password required:true}
*Minimum 8 characters*

Confirm Password
[********] {type:password required:true}

### Personal Information

First Name
[_____________________________] {required:true}

Last Name
[_____________________________] {required:true}

Phone Number
[_____________________________] {type:tel}

Date of Birth
[_____________________________] {type:date}

:::

---

**Address**

Street Address
[_____________________________]

City
[_____________________________]

State/Province
[Select state...v]

Zip/Postal Code
[_____]

Country
[United States...v]

---

**Account Preferences**

Account Type
- (*) Personal
- ( ) Business
- ( ) Student

Newsletter Preferences
- [x] Weekly newsletter
- [x] Product updates
- [ ] Special offers
- [ ] Event notifications

---

**Terms & Privacy**

- [x] I agree to the [Terms of Service](https://example.com/terms)
- [x] I agree to the [Privacy Policy](https://example.com/privacy)
- [ ] I want to receive marketing emails

[Create Account]* [Cancel]

:::

10. Form Validation & Help Text ​

Input with Helper Text ​

Email Address
[_____________________________] {type:email required:true}
*We'll never share your email with anyone else*

Password
[********] {type:password required:true}
*Must be at least 8 characters with uppercase, number, and special character*

Best Practices ​

Style Variations:

  • sketch - Hand-drawn form wireframes
  • clean - Modern minimal forms
  • wireframe - Structure-focused inputs
  • tailwind - Contemporary form design
  • material - Google-style form controls
  • brutal - Bold form layouts
  • none - Semantic HTML for custom styling

Generate this example:

bash
wiremd form-controls.md --style sketch
wiremd form-controls.md --style clean -o forms-clean.html
wiremd form-controls.md --style material -o forms-material.html