Skip to content

Instantly share code, notes, and snippets.

@maphew

maphew/gist:ebb2bf54ff3dfea8e40e0f060d2c9538

Created September 28, 2025 02:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maphew/ebb2bf54ff3dfea8e40e0f060d2c9538 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maphew/ebb2bf54ff3dfea8e40e0f060d2c9538 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. maphew created this gist Sep 28, 2025.
    95 changes: 95 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    #!/usr/bin/env -S uv run --script
    # /// script
    # requires-python = ">=3.11"
    # dependencies = [
    # "python-fasthtml",
    # ]
    # ///
    #

    from fasthtml.common import *

    app, rt = fast_app(
    pico=True,
    hdrs=(
    Style("p {color: red;}"),
    Style("""
    fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    border: none;
    }
    label.pill {
    display: inline-block;
    padding: 0.3em 0.9em;
    border-radius: 999px;
    border: 1px solid var(--pico-primary);
    cursor: pointer;
    user-select: none;
    font-size: 0.9em;
    line-height: 1.5;
    transition: all 0.2s;
    }
    /* unchecked state */
    input[type="checkbox"]:not(:checked) + label.pill {
    background: transparent;
    color: var(--pico-primary);
    }
    /* checked state */
    input[type="checkbox"]:checked + label.pill {
    background: var(--p ico-primary);
    color: white;
    box-shadow: 0 0 0 2px var(--pico-primary);
    }
    """),
    ))

    # this works
    pill_html = NotStr("""
    <fieldset>
    <input type="checkbox" id="title" name="search_title" hidden>
    <label for="title" class="pill">Title</label>
    <input type="checkbox" id="shortname" name="search_shortname" hidden>
    <label for="shortname" class="pill">Shortname</label>
    <input type="checkbox" id="client" name="search_client" hidden>
    <label for="client" class="pill">Client</label>
    <input type="checkbox" id="team" name="search_team" hidden>
    <label for="team" class="pill">Team</label>
    <input type="checkbox" id="author" name="search_author" hidden>
    <label for="author" class="pill">Author</label>
    <input type="checkbox" id="type" name="search_type" hidden>
    <label for="type" class="pill">Type</label>
    <input type="checkbox" id="dirid" name="search_dir_id" hidden>
    <label for="dirid" class="pill">Dir ID</label>
    </fieldset>
    """)


    @app.get("/")
    def home():
    return Titled("FastHTML",
    P("Let's do this!"),
    pill_html,

    # this doesn't work, completely:
    Fieldset(
    Legend("Toggle fields to search (default is all)"),
    Label("short",
    Input(type="checkbox", id="short", hidden=True),
    forHtml="short", cls="pill",
    ),

    )
    )

    serve()