## Basic controls
```
☐ Checkbox1
☑ Checkbox2
⦿ Radio1
〇 Radio2
┌──────────────┐
│ Textinput │ border: 1px (thin)
└──────────────┘
┏━━━━━━━━━━━━━━┓
┃ Textinput ┃ border: 2px (thick)
┗━━━━━━━━━━━━━━┛
╭──────────────╮
│ Button │ border: 1px, rounded,
╰──────────────╯
╭──┬───────────╮
│Ⴍ │SearchInput│ border: 1px, rounded,
╰──┴───────────╯
┏━━┳━━━━━━━━━━━┓
┃Ⴍ ┃SearchInput┃ border: 2px, focused
┗━━┻━━━━━━━━━━━┛
┏━━━━━━━━━━━━━━┓
┃ Button ┃ border: 2px, rounded(will be cancelled)
┗━━━━━━━━━━━━━━┛
┌────────────┬─┐
│ Combobox │⌵│
└────────────┴─┘
┏━━━━━━━━━━━━┳━┓
┃ Combobox ┃⌵┃ border: 2px, rounded(will be cancelled)
┗━━━━━━━━━━━━┻━┛
```
**State transition**
```
╭──────╮ ▄▄▄▄▄▄▄▄
│ btn │ █ btn ██
╰──────╯ ▀▀▀▀▀▀▀▀
┌──────┐ ▄▄▄▄▄▄▄▄
│ btn01│ █btn01██
└──────┘ ▀▀▀▀▀▀▀▀
┌────────────┬─┐
│ Item12 │⌵│
├────────────┴─┴────┐
│ Item11 │ border: 1px, divider: true
│────────────────── │
│█Item12 ██████████ │
│────────────────── │
│ Item13 │
│────────────────── ▇
│ Item14 ▇
│────────────────── ▇
│ Item15 │
└───────────────────┘
```
## Progress bar
```
┌───────────────────────────────────────────┐
│ █████████████ 25% │ border: 1px, no segment
└───────────────────────────────────────────┘
████████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ border: 0, segmented
┌───────────────────────────────────────────┐
│ ███████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ │ border: 1px, segmented
└───────────────────────────────────────────┘
╭───────────────────────────────────────────╮
│ ███████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ │ border: 1px, rounded border, segmented
╰───────────────────────────────────────────╯
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ███████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ ┃ border: 2px, segmented
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
```
## Slider
```
──────▮──────────── track-width: 1px
━━━━━━▮━━━━━━━━━━━━ track-width: 2px
```
## Scrollbars
```
│ track-width: 1px
│
│
▇
▇
▇
│
│
│
│
────────▮▮▮▮▮──────────
┃ track-width: 2px
┃
┃
▇
▇
▇
┃
┃
┃
━━━━━━▮▮▮▮▮━━━━━━━━━━
```
## Box
```
┌────────────────────────────────┐
│ │ border: 1px
│ │
│ │
│ │
│ │
└────────────────────────────────┘
╭────────────────────────────────╮
│ │ border: 1px, rounded,
│ │
│ │
╰────────────────────────────────╯
╭────────────────────────────────╮
│ │ border: 1px, border-radius: 1px 1px 0 0
│ │
│ │
└────────────────────────────────┘
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┃ border: 2px
┃ ┃
┃ ┃
┃ ┃
┃ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
** Resizable
┌────────────────────────────────┐
│ │ border: 1px, resizable
│ │
│ ⠴ │
└────────────────────────────────┘
┌────────────────────────────────┐
│ │ border: 1px, resizable
│ │
│ │
└───────────────────────────────◿
┌────────────────────────────────┐
│ │ border: 1px, resizable
│ │
│ │
└────────────────────────────────◢
┌────────────────────────────────┐
│ │ border: 1px, resizable
│ │
│ │
└────────────────────────────────⇲
┌────────────────────────────────┐
│ │ border: 1px, resizable
│ │
│ │
└───────────────────────────────.:
➤
```
## Scrollable box
```
┌────────────────────────────────┐
│ │ border: 1px, overflow: auto
│ │
│ ▇
│ ▇
│ ▇
│ │
│ │
│ │
│ │
└─────────▮▮▮▮▮──────────────────┘
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┃ border: 2px
┃ ┃
┃ ▇
┃ ▇
┃ ▇
┃ ┃
┃ ┃
┃ ┃
┃ ┃
┗━━━━━━━━━▮▮▮▮▮━━━━━━━━━━━━━━━━━━┛
```
## List
```
┌───────────────┐
│ Item11 │ border: 1px, divider: false
│ Item12 │
│ Item13 ▇
│ Item14 ▇
│ Item15 ▇
│ Item16 │
│ Item17 │
│ Item18 │
│ Item19 │
└───────────────┘
┌───────────────┐
│ Item11 │ border: 1px, divider: true
│────────────── │
│ Item12 │
│────────────── │
│ Item13 │
│────────────── ▇
│ Item14 ▇
│────────────── ▇
│ Item15 │
│────────────── │
│ Item16 │
│────────────── │
│ Item17 │
│────────────── │
│ Item18 │
│────────────── │
│ Item19 │
└───────────────┘
```
## Tabs:
```
╭──────╮
│ tab1 ├─tab2─┬─tab2─╮
┌──┘ └──────┴──────┴────────┐
│ │
│ │
│ │
│ │
│ │
└────────────────────────────────┘
╭──────╮──────┬──────╮
│ tab1 │ tab2 │ tab2 │
┌──┘ └──────┴──────┴────────┐
│ │
│ │
│ │
│ │
│ │
└────────────────────────────────┘
```
