How to make a checklist?

[ghostsquad]

The readme shows checkmarks next to some items in a list. I was wondering how?

[ossenthusiast]

• Usage: https://github.com/charmbracelet/lipgloss/blob/master/examples/layout/main.go#L276
• Layout: https://github.com/charmbracelet/lipgloss/tree/master?tab=readme-ov-file#joining-paragraphs

---

• Header: https://github.com/charmbracelet/lipgloss/blob/master/examples/layout/main.go#L133
• Item: https://github.com/charmbracelet/lipgloss/blob/master/examples/layout/main.go#L140

---

• Checkmark: https://github.com/charmbracelet/lipgloss/blob/master/examples/layout/main.go#L142
• Item Done: https://github.com/charmbracelet/lipgloss/blob/master/examples/layout/main.go#L147

[kinthaiofficial]

Making a checklist with lipgloss is straightforward — you handle the checked/unchecked state in your model and render it with styled strings.

package main

import (
    "fmt"
    "strings"
    "github.com/charmbracelet/lipgloss"
)

var (
    checked   = lipgloss.NewStyle().Foreground(lipgloss.Color("10")).Render("✓")
    unchecked = lipgloss.NewStyle().Foreground(lipgloss.Color("8")).Render("○")
    itemStyle = lipgloss.NewStyle().PaddingLeft(2)
    selectedStyle = lipgloss.NewStyle().Bold(true).Foreground(lipgloss.Color("212"))
)

type Item struct {
    label   string
    checked bool
}

func renderChecklist(items []Item, cursor int) string {
    var sb strings.Builder
    for i, item := range items {
        icon := unchecked
        if item.checked {
            icon = checked
        }
        
        label := itemStyle.Render(item.label)
        if i == cursor {
            label = selectedStyle.Render(item.label)
        }
        
        sb.WriteString(fmt.Sprintf("%s %s\n", icon, label))
    }
    return sb.String()
}

For the interactive model:

func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.KeyMsg:
        switch msg.String() {
        case "up", "k":
            if m.cursor > 0 { m.cursor-- }
        case "down", "j":
            if m.cursor < len(m.items)-1 { m.cursor++ }
        case " ", "enter":
            m.items[m.cursor].checked = !m.items[m.cursor].checked
        }
    }
    return m, nil
}

For a fancier look, lipgloss.NewStyle().Strikethrough(true) on completed items is a nice visual touch. You can also render a progress indicator with lipgloss.NewStyle().Foreground(...) based on the completion ratio.