Text areas, tabs and separators

Three components of uiconfig-tweakpane: textarea for text on several lines, tabs with a folder on each tab, and separator.

Tweakpane only

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css

text-tabs.js

const note = {
    title: 'Release notes',
    body: 'Line one\nLine two\nLine three',
    draft: true,
    audience: 'everyone',
    channel: 'stable',
}

ui.appendChild({
    type: 'folder',
    label: 'Note',
    expanded: true,
    children: [
        {type: 'input', label: 'Title', property: [note, 'title']},
        {type: 'textarea', label: 'Body', rows: 4, property: [note, 'body']},
        {type: 'separator'},
        {
            type: 'tabs',
            children: [
                {
                    type: 'folder',
                    label: 'Publish',
                    children: [
                        {type: 'checkbox', label: 'Draft', property: [note, 'draft']},
                        {
                            type: 'dropdown',
                            label: 'Channel',
                            property: [note, 'channel'],
                            children: [{label: 'stable'}, {label: 'beta'}],
                        },
                    ],
                },
                {
                    type: 'folder',
                    label: 'Audience',
                    children: [
                        {type: 'input', label: 'Audience', property: [note, 'audience']},
                    ],
                },
            ],
        },
    ],
})

Blueprint has no textarea, tabs or separator component. For text on several lines, give an input the option multiline: true there.