Add kitchen sink examples to components detail pages

_quarto.yml

@@ -142,6 +142,7 @@ website:
             - components/inputs/action-link/index.qmd
             - components/inputs/checkbox/index.qmd
             - components/inputs/checkbox-group/index.qmd
+            - components/inputs/dark-mode/index.qmd
             - components/inputs/date-range-selector/index.qmd
             - components/inputs/date-selector/index.qmd
             - components/inputs/file/index.qmd

components/_partials/components-detail-kitchen-sink.ejs

@@ -0,0 +1,23 @@
+::: {.kitchensink}
+
+<% for (const item of items) { %>
+
+## Variation Showcase
+
+A live kitchen sink of all possible parameters for the <%= item.title %> in [Shiny Core](<%= item.core %>){target="_blank"} and [Shiny Express](<%= item.express%>){target="_blank"}.
+
+![](<%= item.image %>){.border .my-4 style="border-radius: .5em;"}
+
+::::{.grid}
+:::{.g-col-sm-6 .g-col-12}
+<p class="m-0">[<i class="bi bi-lightning-fill me-2"></i> Live Core App](<%= item.core %>){.btn .btn-primary .w-100 .m-1 target="_blank"}</p>
+:::
+
+:::{.g-col-sm-6 .g-col-12}
+<p class="m-0">[<i class="bi bi-lightning-fill me-2"></i> Live Express App](<%= item.express %>){.btn .btn-primary .w-100 .m-1 target="_blank"}</p>
+:::
+::::
+
+<% } %>
+
+:::

components/_partials/components.css

@@ -19,13 +19,13 @@ The article pages (/components/_____/index.qmd) get styling from here.
 
 /* Add rule and spacing between sections */
 
-section.level2:not(:first-child) h2 {
+section.level2:not(:first-child) h2, section.level3:not(:first-child) h2 {
   border-top: 1px solid var(--bs-primary);
   padding-top: 5rem !important;
   margin-top: 5rem !important;
 }
 
-section.level2:not(:first-child) > :last-child {
+section.level2:not(:first-child) > :last-child, section.level3:not(:first-child) > :last-child {
   margin-bottom: 0;
 }
 

components/inputs/action-button/app-kitchensink-core.py

@@ -0,0 +1,59 @@
+from shiny import App, reactive, render, ui
+
+# Create the UI
+app_ui = ui.page_fluid(
+    # Add Font Awesome CSS in the head
+    ui.tags.head(
+        ui.tags.link(
+            rel="stylesheet",
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css",
+        )
+    ),
+    # Main layout
+    ui.layout_column_wrap(
+        ui.card(
+            ui.card_header("Action Button Examples"),
+            # Basic button with width parameter
+            ui.input_action_button(id="btn1", label="Basic Button", width="200px"),
+            ui.output_text("click_count_btn1"),
+            ui.br(),  # Add spacing
+            # Button with icon and disabled state
+            ui.input_action_button(
+                id="btn2",
+                label="Disabled Button with Icon",
+                icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+                disabled=True,
+            ),
+            ui.output_text("click_count_btn2"),
+            ui.br(),  # Add spacing
+            # Button with custom class and style attributes
+            ui.input_action_button(
+                id="btn3",
+                label="Styled Button",
+                class_="btn-success",
+                style="margin-top: 20px;",
+            ),
+            ui.output_text("click_count_btn3"),
+        ),
+        width="100%",
+    ),
+)
+
+
+# Define the server
+def server(input, output, session):
+    @render.text
+    def click_count_btn1():
+        return f"Button 1 clicks: {input.btn1() or 0}"
+
+    @render.text
+    def click_count_btn2():
+        return f"Button 2 clicks: {input.btn2() or 0}"
+
+    @render.text
+    def click_count_btn3():
+        return f"Button 3 clicks: {input.btn3() or 0}"
+
+
+# Create and return the app
+app = App(app_ui, server)

components/inputs/action-button/app-kitchensink-express.py

@@ -0,0 +1,51 @@
+from shiny import reactive
+from shiny.express import input, ui, render
+
+ui.page_opts(full_width=True)
+
+# Add Font Awesome CSS for icons
+ui.head_content(
+    ui.HTML(
+        '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">'
+    )
+)
+
+# Create a layout with some spacing
+with ui.layout_column_wrap(width="100%"):
+    with ui.card():
+        ui.card_header("Action Button Examples")
+
+        # Basic button with width parameter
+        ui.input_action_button(id="btn1", label="Basic Button", width="200px")
+
+        @render.text
+        def click_count_btn1():
+            return f"Button 1 clicks: {input.btn1() or 0}"
+
+        ui.br()  # Add some spacing
+
+        # Button with icon and disabled state
+        ui.input_action_button(
+            id="btn2",
+            label="Disabled Button with Icon",
+            icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+            disabled=True,
+        )
+
+        @render.text
+        def click_count_btn2():
+            return f"Button 2 clicks: {input.btn2() or 0}"
+
+        ui.br()  # Add some spacing
+
+        # Button with custom class and style attributes
+        ui.input_action_button(
+            id="btn3",
+            label="Styled Button",
+            class_="btn-success",
+            style="margin-top: 20px;",
+        )
+
+        @render.text
+        def click_count_btn3():
+            return f"Button 3 clicks: {input.btn3() or 0}"

components/inputs/action-button/index.qmd

@@ -28,6 +28,13 @@ listing:
   - title: reactive.event
     href: https://shiny.posit.co/py/api/reactive.event.html
     signature: reactive.event(*args, ignore_none=True, ignore_init=False)
+- id: kitchen-sink
+  template: ../../_partials/components-detail-kitchen-sink.ejs
+  contents:
+  - title: Action Button
+    core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETAMJSoFJmTZwmAVQCS+tKgD6OpgF4mOrFADmcK40ADY6qgAU+kwxTMYiqqpMAGKkwiIA7nAsjLYmAMr5vBBWNkw2UKrRsb5kASwYFZHVsTUcGHX+DSFcANZRJa1DMVIhnrpgLGTYIdk2cGQTeC3DsWxSNONgbGRkqCyIAPSHhKoQAFYNhCHEWqqhUFIYJDCHUOdQAB6HPQBGLIcaGkALRQLI5eCHABsGAA7BgAEwnFgAqAhEIYGBcZ4opYrVoAShWBOWgxixgAslAuEwQlBsLdFmSfO06QytGRXCQwjAIK4MnQ0ANVizno9msyRb5COLXE0NFEwCJZBxSEwAEIcshqgCin1gqFmLAmJPxq2M6qgLA4hCYvy1aoyHGsTCdqhdqEesAWGjNw18XFQHNcMjkpFc9t2pAiHFUW1+ZAgAEYlrSoL84GMJpbrbbNVGDPhXbHrFsEQAGcuoT4m0ki1q+RlBzkUT5kRXXG29Lm3cgRxMpsCmyWrXy-OgREnk0SJViewhcfx+oYWh0lJ0um1qqBqJiqDgsdOzJJTCxwZcN9qB4Oh1V8yPaiDC+vDWPxxMIvEjl90jNZsAACIHkecBJPmj7Fi6DgkIWdYvkMW4QJ4tT1BgHARNcVosK4Ww0FAwI5D0SR4QRnCZqowJsGiihVEOcHwbE+6Hr8x6eAAKnQWhKBesTDgxjYcs2ritu2EydoQ3YkFofYJhAn50TxMRjhOU5xDOJ7zouilqeBjrOmwTCEFoUyMIZdIokwO4ntMsyWbsdAcJG2TaQGEBCbe4YPtG2mtG+EyyQAzF+DGtL+mZbPkNmgRqa7BSFMSYSiOH+YmBFaIQhDZMa+A+bEUwzHAWwwI8-hcMC2qoIgTAVtWADccUvnx8ECXswYiR2PQST20mcoFtbLk1wxuqWExJpWACkDVMMORIGHNxgAXANBcLY1i2CwGiKHQ+jqDQrCbQq15kBITYchIG0oneBKICsAACKjqHQHRwG2Ky7WZXbdTJA6Tjd36SAsWh0CUNDZmuTBJh9EkHEwIBHRgslJpOTCCEw5YAL4TPod0PRoz2vcy73iZJva9R+v3LlIZBAyDYMFtVUO9DDcNuRyCPkwSKN0GjmNgNjzL3ZQj340yrRE51JM9f2EABRT-1UzTTCg2AuklAFjPM-DgXI6jGNY3NRimOYlhWQD1PA6UtguM46BeKI6ARC47gcOdB10LNYDowAukAA
+    express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPE2MdzoiABM4defMtYoAczgB9YqjIsAFDTGADbBngDuHLZkbAC8ACp0xnAAlE4QAMRMAIK2tkwAYqTC2eFwLIxwTADCAMq1TDSCvCQQLM4cGGxitp6tFOT+8kwjFp0AEvEAsgAyQxCji0wA5AA8wVwA1iJwwbGyYCxk2MHl3XBkB0xsojT7YGxkZKgsiAD0b4S2EABWLBiEYLEYy2GjBKCiAGMN5QH5QdRvDYAIxYbya5AAtFAyhV4G8AGwYADsGAATJ8dDDQhgYFwAToDgA+ZbDUZpCDs+RZaqiKAUJhQJjg7DA4SRGKsSqsVDiLhueTithjDDC0V9YjBYwwCAROhofyRaJxA4ARgADGaAKQHFKIVkjRXKwgQ2z+W32pYuZ10XrdKD2OhDMDZCQcUhMABCpjI4YAoupYKhTu0wJyFksRlkI1AWBxCEwkdHw47DRKZXr4BRHOmMy4jKZPOJJKRPIWnqR-FF7kiyBATQdzOCkbt7tnc-mo+2IAOmKXjWBSRbUOobekMyMAAI2AMYCjqS41pb2GhMQF5zbq4zkVu9k1uu2H9c7MjGOgLGgHScxhYm08bQibK8TAgPWZAYD2fZukwzRmgAvgca7ri4SKBikmY5HkkrwNKsoQPK06PqMWZFgsjp5uGUB2EwtgcCwUBIqc+RHHyciESMdYQCYZCNqGLZtt+8xPosXYHBBpIDh6T5DiOBwACK0fRjGRiRs4cBKACSrQSWxSzkRAsQuGQ7j-Bw-iAjmLCePcNBQBiFQbPkNl2Zwuy2BibBQMEMi2DaeCSeuNF0QxcC2AkSRwH5Olpk+W6UDue4Hk+x5-uel7XmJ97+Rmogvm+jSfippIpQBQEgZxpjgb2pJQTB8FgIhtadChUFMFkuRMVKLAyoQcoNUsxFTqpEqEMYRxKOZOgClRRwnFUfJkHQHBtuUWXKqBPHNjq-EdqtwmhaJvYAMzaUJozSXsBy1McSlfqQJ2nX+FlWQdEB2cYhCEOUKaRQ9rDXXA9wwBCbhcBiMaoIgTCLsuADc90ZtF66xXYDi7hoiUBXAJ5ngBaXcRBh2ZTpiw5a+74FYNh3FYBkNlVxlUQITaG1QhEBgLBAC6QA
+    image: thumbnail.png
 ---
 
 :::{#example}

components/inputs/action-link/app-kitchensink-core.py

@@ -0,0 +1,38 @@
+from shiny import App, reactive, render, ui
+
+# Define the UI
+app_ui = ui.page_fillable(
+    # Add Font Awesome CSS in the head section
+    ui.tags.head(
+        ui.tags.link(
+            rel="stylesheet",
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css",
+        )
+    ),
+
+    # First card
+    ui.card(
+        ui.card_header("Action Link Demo"),
+        # Create an action link with an icon
+        ui.input_action_link(
+            id="demo_link",
+            label="Click Me!",
+            icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+        ),
+        ui.output_text("link_clicks"),
+        full_screen=True,
+        height="300px",
+        id="card1",
+    ),
+)
+
+
+# Define the server
+def server(input, output, session):
+    @render.text
+    def link_clicks():
+        count = input.demo_link() or 0
+        return f"The link has been clicked {count} times"
+
+# Create and return the app
+app = App(app_ui, server)

components/inputs/action-link/app-kitchensink-express.py

@@ -0,0 +1,30 @@
+from shiny import reactive
+from shiny.express import input, render, ui
+
+# Add Font Awesome CSS in the head section
+ui.head_content(
+    ui.HTML(
+        '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">'
+    )
+)
+
+# Set page title
+ui.page_opts(fillable=True)
+
+
+# Create a card to hold the action link
+with ui.card(full_screen=True, height="300px", id="card1"):
+    ui.card_header("Action Link Demo")
+
+    # Create an action link with an icon
+    ui.input_action_link(
+        id="demo_link",
+        label="Click Me!",
+        icon=ui.tags.i(class_="fa-solid fa-shield-halved"),
+    )
+
+    # Display the click count
+    @render.text
+    def link_clicks():
+        count = input.demo_link() or 0
+        return f"The link has been clicked {count} times"

components/inputs/action-link/index.qmd

@@ -28,6 +28,13 @@ listing:
   - title: reactive.event
     href: https://shiny.posit.co/py/api/reactive.event.html
     signature: reactive.event(*args, ignore_none=True, ignore_init=False)
+- id: kitchen-sink
+  template: ../../_partials/components-detail-kitchen-sink.ejs
+  contents:
+  - title: Action Link
+    core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETACJwaXOEzJsrAVQCS+tKgD6OpgF4mOrFADmcK4WADYhUABGIXAAFPpMCUzGIqqqTABipMIiAO5wLIxWAMIAyiW8ENa2TLZQaSxwshyk8Ym+ZAEsGLWqcZWJA+2dGCFcANZ9A1OJUiGeumAsZNjR7HBwZAt4rdMDbFI082BsZGSoLIgA9JeEqhAAVl2EIcRaqjThUhgkMJdQ91AAB6XUYRFiXGhZAC0UDyBXglwAbBgAOwYABMNxY4KgYQwMC432xWx2UwAlKSydsDP0EsZ0hw6EsmIQoHRVKTfKz2ZNdly2apXD0NHEwCImqQmAAZcamOAwYgLKmkgbGIpSKAUJhQSoyOSS0YQMZMHIcGzayocEg03Y+DgYLioLRkVx65oQVyGiYq3YcVRHdQKz3jEm021McIROBzBZFUaEY0AWTgAEJQ+HElbSJ4hv4uhwYs8oNjXEcaFAoQVRmly5XONHVFC2LjFBywMqwwMO7bfK8zs7XBRAWRRV7XM8rWMWErqbaaFowq4WIQpJRPAAVOhaJQ+hK2Dj+E5HADMAAZT6hAenff6FtzVABGa8JDsUmlGOUWCBWGxWBp0RQ6H0dQaFYDRAJiR1nQkPsnTICQGmxd0yUQUkAAEVHUOgMCHTYwxAiNxnHeMpxiFDdxZV5yC8Co4IwQNiGDI0yKYQQmFPCipDILQ6EqGgFnXaovRqYsmCjSgWRIuA0hAEgtHIABfaw+HyBZ9A-dVpC1HU0i4njKl-bV0GcdAaLEVAYhcdwOAQ8CNDfMAFIAXSAA
+    express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPCMoATOHXPGO8+QGImAQUuWmAMVLDXAdzgWRjgmAGEAZQjeCCYyNlCEqE8WOAkOUnl7DCTLAH0SckoyAAp5JgqmbIAJABUAWQAZMtjKtoByAB4AGy4AawtugF5ZMBYybG6ghLgyUaY2URoRsDYyMlQWRAB6bcJLCAArFgxCbuJjSxpuqFFTxm2oQ6h1bd6AIxZtml8AWihAsF4NsAGwYADsGAATHsdI9ut0MDAuKcdKMAHztcqVACU8jxEGcTAisyYqCgAHNQpIyFMshwsJS4HliKgyCwSjQOAioO8pkNanRjHACY4IC4wqIoBQmFAmIRbp4yMQFsRukqErL0qQmL0IH15P4OPEqgyFXRLJzjAi8ixCKJKAKhXBzAkOBS1isAMwABh9qHUo3MHEsK3NlgAjKMcYhsRVsuG8rkbGUwK5tbFGv0mAAROAwYjRsVtCVSmVQWLiSQ6vUDI0miu8Qpx00YIymPJVjIQPK1lptNohlbWAu9-pBlttG7vODDUZhXqEAb1OAAQgnrQHTdIQ2yZEpJw4JTOUB0eRWNCgv2CvU8l+vnFnll+bCg3RklmjeBbos3TBcOYcCwqA3Dw8ShGcHBLvKFzkC2AACogQNYdAYBQ6hzH+1g0Lq-QFIufQcjGk6VCQxjkEwQwxCYZAYCOxBjvqJQ4kwghMD6JEVKIZDGHQsQ0KMtSarWCynkwM6UPKBFwJ4IBkeQAC+cR8EEozyGACkALpAA
+    image: thumbnail.png
 ---
 
 :::{#example}

components/inputs/checkbox-group/app-kitchensink-core.py

@@ -0,0 +1,38 @@
+from shiny import App, reactive, render, ui
+
+# Create sample choices with HTML formatting for demonstration
+choices = {
+    "red": ui.span("Red", style="color: #FF0000;"),
+    "green": ui.span("Green", style="color: #00AA00;"),
+    "blue": ui.span("Blue", style="color: #0000AA;"),
+}
+
+app_ui = ui.page_fluid(
+    ui.card(
+        ui.card_header("Color Selection Demo"),
+        # Using input_checkbox_group with all its parameters
+        ui.input_checkbox_group(
+            id="colors",  # Required: unique identifier
+            label="Choose colors",  # Required: label text
+            choices=choices,  # Required: choices as dict with HTML formatting
+            selected=["red", "blue"],  # Optional: pre-selected values
+            inline=True,  # Optional: display choices inline
+            width="300px",  # Optional: CSS width
+        ),
+        # Add some spacing
+        ui.hr(),
+        # Output for selected values
+        ui.output_text("selected_colors"),
+    )
+)
+
+
+def server(input, output, session):
+    @render.text
+    def selected_colors():
+        if input.colors():
+            return f"You selected: {', '.join(input.colors())}"
+        return "No colors selected"
+
+
+app = App(app_ui, server)

components/inputs/checkbox-group/app-kitchensink-express.py

@@ -0,0 +1,34 @@
+from shiny import reactive
+from shiny.express import input, render, ui
+
+ui.page_opts(full_width=True)
+
+# Create sample choices with HTML formatting for demonstration
+choices = {
+    "red": ui.span("Red", style="color: #FF0000;"),
+    "green": ui.span("Green", style="color: #00AA00;"),
+    "blue": ui.span("Blue", style="color: #0000AA;"),
+}
+
+with ui.card():
+    ui.card_header("Color Selection Demo")
+
+    # Using input_checkbox_group with all its parameters
+    ui.input_checkbox_group(
+        id="colors",  # Required: unique identifier
+        label="Choose colors",  # Required: label text
+        choices=choices,  # Required: choices as dict with HTML formatting
+        selected=["red", "blue"],  # Optional: pre-selected values
+        inline=True,  # Optional: display choices inline
+        width="300px",  # Optional: CSS width
+    )
+
+    # Add some spacing
+    ui.hr()
+
+    # Simple output to show selected values
+    @render.text
+    def selected_colors():
+        if input.colors():
+            return f"You selected: {', '.join(input.colors())}"
+        return "No colors selected"

components/inputs/checkbox-group/index.qmd

@@ -26,6 +26,13 @@ listing:
     href: https://shiny.posit.co/py/api/ui.input_checkbox_group.html
     signature: ui.input_checkbox_group(id, label, choices, *, selected=None, inline=False,
       width=None)
+- id: kitchen-sink
+  template: ../../_partials/components-detail-kitchen-sink.ejs
+  contents:
+  - title: Checkbox Group
+    core: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJMAgujxM6cKITIcAbnAlSIAEzh0JAVw4AdCPoDETAMJSoFVrFQAbOE0JtiHQnBZMA7hzJsmACQAVAFkAGSYaQRgLOQgAc3DBJnUYUhYyOgsOUn1HZ1d3AF4mEH0mMqZdMClVSsQmHQwWVCgIAApKgCU4GvxWMmw7AsqSG0E6wwAxCYAGWemAbkqASjxS8srYqUpa+o5G5rbKgHEtg160gbghomJRunHZkRFZxbAVtbLKgCMbLTgdhpNFrtMAAIV+-3O-UGw1uYyYhjm0yer3eEAAvvp9GhUAB9HRMIoNZqxOC4mi-DiqdoQcq7DCEKB0akfOn0xnM3FsaTqOggkxwuhMADKcDssiytIAInAUstVrS2WVjABVFhceJcVBaMi4xxwQgAay+xAAHrjNsQtKhPN5fFAbDZeGR3M0MvAKHQWKy6Q0tTq9dyjSbzZbrTSlUqqdcRoJvb0EUwugBHHTVOpaCAcVP2KmUOQ0DgaH2RmxQL5i64mJzEFj2WNeyoSRMptPdOplitOiimsglpW5FxuAqD-LN4ytjjphxOIfuKDuVQuYReHz+YJhCJ0KJkGKxftsuviiiqArASrVJsVMA-P6VAC646YAHlUHJSA66qgpABaI8Gk8mHkB0-m9RVI3KLgbC4K4AjoP4n1fd9oBsOolyaMseFHNxeAgaCIH+cCINtVQfGuABmWZUFNK9EyQyVP1MYVhRInwDzRCDjBEVRVFYRh7CBQgNQPBo2D5DjI2MZ8dW1YQt1YMUAO6ICQLcES9itMhZNxHsyBBf9ZG6PVBXjCSyiWfQLIMaz1BoBS6EUPl-TICRNNkiQ6xYdVSCWRBWQAARUXkMF01lbIU48jIbFhWl8g8ODs5yGRM2K-KIiCpDILQ6FpGhKgATStCKlNUOoQAAcgkcqMAAK2cNokui2KlkxMAD0y7LaUqAA5YgHBM4rDJ6LFrJxQlRHQVocXxDgPI0RyljAdF7yAA
+    express: https://shinylive.io/py/editor/#h=0&code=NobwRAdghgtgpmAXGKAHVA6VBPMAaMAYwHsIAXOcpMAMwCdiYACAZwAsBLCbJjmVYnTJM6cKITIcAbnAA6Eeo1aduGOAA9Uoli179BwrqgCuZPCMoATOHXPGO8+faxQA5nAD6xVGRYAKGmMAGyCPAHcOSzI2AF4AFTpjOABKRwgAYiYAYVEoClZYVCC4JkI2Yg5COF0I6KYACTiAWQAZJhpBGDzJCFd2wSZrGFIWMjo8jlJ5Moqq3RimEHkmFaZZMFFLdcQmZxZUKAg-dYAlOC38VjJsYpj1kiDBHfSAMReABk-3gG515Lxlqt1q5RJRtrsOBh9odjmAAOKgiDrcyjG5wO5EYiPOjPT4AQTxn1+YH+gJW6wARkEkuC9gcjusAELUuSXVG3e5Yp5MdJfd4E4mkiAAXzStTYEIwhCgdEsfmSiDJkulso8bDE1josKyXLoTAAynBihJJhAmAARODDP5pVY8pgAVRYXD6RlMHjKcEIAGsKcR1B4QcRjKgmOKmFAQrxfEwDuN4BQ6Cwlc43WQPeqfX6A0GQ8czXbVpEMQ9BMnLvazgBHeybHbGCAcGslSKUSQ0Dg2JV2oJQClGjFZcrEFglUtJ5ErTLV2vnHa9-tBJgUdRkburGaVaoxTdzcyVuA1jh10rlLe6KC6SyVYThxqtfp0LpkHqudcrUfGiiWGLAdabSdKRZdYAF190yAB5HxTUjHYtDgABaT8vW-JgpEjJJkwLQteAgIIuHRBIknApgoMkUhYMGDh9l7Hhd2qXD8IgORsMLCIolidYAGZPlQdRJ3tMiYKCHYsn1fUw0iaIlVSJFWMyPFLEsVhGBKaFCBdFNITYLVZKVTJ9T4IoSmDMgTGEMhiGUYgwlYI0UPONCMOqJUAAFRAgTUMBXNdWOsGg7K-c4PV1fwFXfXgArTKVQvlRVWJwlZRDIYw6DNGh1gATWDQKHMsHYQAAcnMQqMAAKwqI5ovHMLklFMAIuS1KzXWAA5KyatyiRznWeQwGFECgA
+    image: thumbnail.png
 ---
 
 :::{#example}

components/inputs/checkbox/app-kitchensink-core.py

@@ -0,0 +1,46 @@
+from shiny import App, reactive, render, ui
+
+# Define the UI
+app_ui = ui.page_fluid(
+    # Card containing all elements
+    ui.card(
+        ui.card_header("Checkbox Demo"),
+        # Basic checkbox with default value (False)
+        ui.input_checkbox(id="basic", label="Basic checkbox"),
+        ui.output_text("basic_value"),  # Individual output for basic checkbox
+
+        # Checkbox with initial value set to True
+        ui.input_checkbox(
+            id="preset_value", label="Checkbox with preset value", value=True
+        ),
+        ui.output_text("preset_value_text"),  # Individual output for preset checkbox
+
+        # Checkbox with custom width
+        ui.input_checkbox(
+            id="custom_width",
+            label="Checkbox with custom width (300px)",
+            value=False,
+            width="300px",
+        ),
+        ui.output_text("custom_width_text")  # Individual output for custom width checkbox
+    )
+)
+
+
+# Define the server
+def server(input, output, session):
+    @render.text
+    def basic_value():
+        return f"Value: {input.basic()}"
+
+    @render.text
+    def preset_value_text():
+        return f"Value: {input.preset_value()}"
+
+    @render.text
+    def custom_width_text():
+        return f"Value: {input.custom_width()}"
+
+
+# Create the app
+app = App(app_ui, server)