textual-wireframe-components.md

Textual Wireframe Components

Text / FIGlet fonts

line height 2

• two point

line height 3

• bigfig
• short
• three point

line height 4

• tmplr
• contessa
• cygnet
• mini
• straight

___                  _ ___  __
 |  _    _|_    /   |_  |  /__ |  _ _|_
 | (/_ >< |_   /    |  _|_ \_| | (/_ |_

Button

╭──────────╮
│  Button  │
╰──────────╯

Input

Input with label

Label
┌──────────────────────────┐
│ Placeholder              │
└──────────────────────────┘

Input with floating label

┌─Label────────────────────┐
│ Placeholder              │
└──────────────────────────┘

Search input

┌──────────────────────────┐
│ Search                 ⌕ │
└──────────────────────────┘

Checkbox

Checkbox with label

Label
☐ Checkbox unchecked
☑ Checkbox ticked
☒ Checkbox crossed

Checkbox with fieldset

╔═Label════════════════════╗
║ ☐ Checkbox unchecked     ║
║ ☑ Checkbox ticked        ║
║ ☒ Checkbox crossed       ║
╚══════════════════════════╝

Radio Group

Radio Group with label

Label
◯ Radio unselected
◉ Radio selected

Radio Group with fieldset

╔═Label════════════════════╗
║ ◯ Radio unselected       ║
║ ◉ Radio selected         ║
╚══════════════════════════╝

Range

        33%
◯───────⬤─────────────────◯

Select

Select with label

Label
┌──────────────────────────┐
│ Select                 ▼ │
└──────────────────────────┘

Select with options

Label
┌──────────────────────────┐
│ Select                 ▲ │
╞══════════════════════════╡
│ Option 1                 │
│ Option 2                 │
│ Option 3                 │
└──────────────────────────┘

Progress

████████▓▒░░░░░░░░░░░░░░░░░░ 33%

Media

Image Placeholder

████████████████████████████████
███████████████████████▓▓▓██████
█████░████████████████▓▓▓▓▓█████
████░░░█████▒██████████▓▓▓██████
███░░░░░███▒▒▒██████████████████
██░░░░░░░█▒▒▒▒▒█████████████████
█░░░░░░░░░▒▒▒▒▒▒████████████████
░░░░░░░░░░░▒▒▒▒▒▒███████████████

Image Frame

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░
░▒▓██████████████████████████▓▒░
░▒████████████████████████████▒░
░▒████████████████████████████▒░
░▒████████████████████████████▒░
░▒▓██████████████████████████▓▒░
░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

Video Frame

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░
░▒███████████▓  ▒▓████████████▒░
░▒███████████▓    ▒▓██████████▒░
░▒███████████▓      ▒▓████████▒░
░▒███████████▓    ▒▓██████████▒░
░▒▓██████████▓  ▒▓███████████▓▒░
░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░