viewof bindableUISkill = ({ prompt: "Demonstrate how to use the bidirection bindable UI composer, the view literal", time: 1700263368139, comment: "Binding inputs, composing within HTML and accessing via a viewof" } && view`

${md` ## Styled View UI Skill ~~~js import {view} from '@tomlarkworthy/view' // required notebook import for bindable UI ~~~ The view literal can compose bidirectional HTML UIs, whose value can be written to and the UI will visually update. They can decorated views with HTML. `}

example

Text Input

${[ "textInput", Inputs.text({ placeholder: "Type something...", value: "Hello World!" }) ]}

Select Input

${[ "selectInput", Inputs.select(["Option 1", "Option 2", "Option 3"], { value: "Option 2", label: "Choose an option" }) ]}

Input Arrays

${[ "array", Array.from({ length: 3 }, (_, i) => Inputs.text({ placeholder: `Input ${i + 1}` }) ), (value) => Inputs.text({ value: value }) ]}

Button Action

${[ "buttonAction", htl.html`

Radio Input

${[ "radioInput", Inputs.radio(["Choice A", "Choice B", "Choice C"], { value: "Choice B", label: "Pick one" }) ]}

Checkbox Input

${[ "checkboxInput", Inputs.checkbox(["Check 1", "Check 2"], { values: ["Check 1"], label: "Select checks" }) ]}