Create a listbox widget as a customizable, dynamic, and accessible alternative to select input widgets. For more information, see the longer post listbox widget.

To use this component, you will need the following files.

my-project/
    R/
        listbox.R
    www/
        css /
            listbox.css
        js/
            listbox.js
    ...

I've included the SASS file and build scripts (using Parcel JS) for compiling the CSS file. I would recommend using SASS for larger projects and importing the listbox.scss accordingly. If you are using vanilla CSS, then load the listbox.css file directly into your app or copy the contents into your app's primary CSS file.

You can use the listbox component in your apps like so.

listbox(
    inputId = "popularTech",
    title = "The Most Popular Technologies",
    label = "Select a technology",
    options = c(
        "JavaScript",
        "HTML/CSS",
        "SQL",
        "Python",
        "Java",
        "Bash/Shell/Powershell",
        "C#",
        "PHP",
        "Typescript",
        "C++"
    ),
    values = c(
        "js",
        "html_css",
        "sql",
        "py",
        "java",
        "bsh_sh_powershell",
        "csharp",
        "php",
        "typescript",
        "cpp"
    )
)

You can clone the entire repository if you like. However, doing so will clone the entire history to your local machine. I would recommend using git sparse-checkout to clone the repository locally.

git clone --filter=blob:none --sparse https://github.com/davidruvolo51/shinyAppTutorials
cd shinyAppTutorials
git sparse-checkout init --cone
git sparse-checkout set shiny-listbox

Then you can run the shiny app in your preferred R environment.

You can run this app within your R environment using the runGithub function. Enter the following command in the console.

shiny::runGitHub(username = "davidruvolo51", repo = "shinyAppTutorials", subdir = "shiny-listbox")

You can run this app locally using the following methods: running within your R environment or cloning this subdirectory.

Make sure Node and NPM are installed on your machine. You may also use Yarn. To test the installation or to see if these tools are already installed on your machine, run the following commands in the terminal.

node -v
npm -v

See the section Clone the shiny-listbox subdirectory for more information.

Next, install the npm packages that are required to run the app locally. I have decided to use pnpm to manage packages on my machine and across projects. To install pnpm, run the following command.

npm install -g pnpm

You will need to install the dependencies in the shiny-listbox subdirectory.

cd shiny-listbox
pnpm install

If you prefer to use npm, use the following.

cd shiny-listbox
npm install

When everything is install, navigate back to the main directory and start the development server. This will start the client at port localhost:8000 and the API at localhost:5000.

npm run start