Text Input

Input Text with await arg()

The simplest form of input you can accept from a user is an arg()

// Name: Input Text
import "@johnlindquist/kit"
let name = await arg("Enter your name")
await div(md(`Hello, ${name}`))

Open input-text in Script Kit

Select From a List of Strings

// Name: Select From a List
import "@johnlindquist/kit"
let fruit = await arg("Pick a fruit", [
"Apple",
"Banana",
"Cherry",
])
await div(md(`You selected ${fruit}`))

Open select-from-a-list in Script Kit

Select From a List of Objects

// Name: Select From a List of Objects
import "@johnlindquist/kit"
let { size, weight } = await arg("Select a Fruit", [
{
name: "Apple",
description: "A shiny red fruit",
// add any properties to "value"
value: {
size: "small",
weight: 1,
},
},
{
name: "Banana",
description: "A long yellow fruit",
value: {
size: "medium",
weight: 2,
},
},
])
await div(
md(
`You selected a fruit with size: ${size} and weight: ${weight}`
)
)

Open select-from-a-list-of-objects in Script Kit

Display a Preview When Focusing a Choice

// Name: Display a Preview When Focusing a Choice
import "@johnlindquist/kit"
let heights = [320, 480, 640]
let choices = heights.map(h => {
return {
name: `Kitten height: ${h}`,
preview: () =>
`<img class="w-full" src="http://placekitten.com/640/${h}"`,
value: h,
}
})
let height = await arg("Select a Kitten", choices)
await div(md(`You selected ${height}`))

Open display-a-preview-when-focusing-a-choice in Script Kit

Discuss Post