Inputs

Change local block state. Bind a control with value={$name}; see State and inputs. State stays in the block until a Choice sends visible context.

import { useState } from 'react';
import { DemoBlock } from '../shared/intelligent-ui.tsx';
import { bound, ui } from '../shared/intelligent-ui-tree.ts';

export default function InputsDemo() {
    const [selected, setSelected] = useState<unknown>(['links']);
    const [notify, setNotify] = useState<unknown>(false);
    const [limit, setLimit] = useState<unknown>(20);
    const [scope, setScope] = useState<unknown>('failed');
    // A Button's action runs on the block's state; here it puts the demo's values back.
    const reset = {
        ...ui('Button', {}, 'Reset'),
        onAction: () => {
            setSelected(['links']);
            setNotify(false);
            setLimit(20);
            setScope('failed');
        }
    };
    return (
        <DemoBlock
            nodes={[
                bound(
                    ui(
                        'Checklist',
                        {},
                        ui('Item', { value: 'links' }, 'Fix the link parser'),
                        ui('Item', { value: 'preload' }, 'Make the bridge method optional')
                    ),
                    selected,
                    setSelected
                ),
                bound(ui('Switch', {}, 'Notify me when it lands'), notify, setNotify),
                bound(ui('Slider', { min: 10, max: 100, step: 10, unit: 'runs' }, 'Runs to compare'), limit, setLimit),
                bound(ui('Segmented', {}, ui('Option', { value: 'failed' }, 'Failed'), ui('Option', { value: 'all' }, 'All')), scope, setScope),
                reset
            ]}
        />
    );
}

$selected = ["links"]
$notify = false
$limit = 20
$scope = "failed"
<Checklist value={$selected}>
<Item value="links">Fix the link parser</Item>
<Item value="preload">Make the bridge method optional</Item>
</Checklist>
<Switch value={$notify}>Notify me when it lands</Switch>
<Slider value={$limit} min={10} max={100} step={10} unit="runs">Runs to compare</Slider>
<Segmented value={$scope}>
<Option value="failed">Failed</Option>
<Option value="all">All</Option>
</Segmented>
<Button action={@Reset()}>Reset</Button>

A control is disabled until its tag closed, and when its value is anything but a bare reference to a declared variable.

Checklist and Item

Select values in a list. Checklist holds only Item, and binds the list of checked values. An Item stands only inside Checklist; its children are the label and may hold a link.

Prop	Type	Required	Notes
value	array of scalars	Yes	At most 1,000; bindable

Item prop	Type	Required	Notes
value	scalar	Yes	A string, number, boolean or null

Switch

A local boolean. Its children are the label.

Prop	Type	Required	Notes
value	boolean	Yes	Bindable

Slider

A local number in a range. Its children are the label.

Prop	Type	Required	Notes
value	number	Yes	Bindable; from min to max
min	number	Yes	Below max
max	number	Yes
step	number	No	Above zero
unit	string	No	Written after the value

Segmented and Option

Choose one value. Segmented holds only Option, and binds the chosen option's value. An Option stands only inside Segmented; its children are its label. Option draws nothing itself: Segmented reads its options.

Prop	Type	Required	Notes
value	scalar	Yes	Bindable

Option prop	Type	Required	Notes
value	scalar	Yes

Button

Runs one action on local state when pressed. Its children are the label.

Prop	Type	Required	Notes
action	action	Yes	@Set($name, constant), @Reset($name) or @Reset()
disabled	boolean	No

action is kept as written and runs only when pressed. Buttons gives the rules.

Show

Shows its children while when is true. Show may stand inside any container, and its children follow that container's rule.

Prop	Type	Required	Notes
when	boolean	Yes

$details = false
<Switch value={$details}>Show details</Switch>
<Show when={$details}><Callout tone="info">The cache missed on every cold start.</Callout></Show>

Each

Repeats its children for every item. Each may stand inside any container, and its children follow that container's rule.

Prop	Type	Required	Notes
items	array	Yes	At most 1,000
as	string	Yes	The item's name, a letter or _ then letters, digits, _

$checks = ["lint", "types", "tests"]
$done = ["lint"]
<Checklist value={$done}>
<Each items={$checks} as="check"><Item value={check}>{check}</Item></Each>
</Checklist>