Previous | Tutorial index | Next

Tutorial 4: Tkinter Widgets – A Comprehensive Overview

Learning Objectives

• Discuss the widgets, functions, other classes, and methods provided in the Tkinter module.
• Understand the parent–child hierarchy and how widgets are instantiated.
• Distinguish between different widget categories (display, input, selection, container, and advanced).
• Configure widgets both at creation and dynamically at runtime.

1. Introduction – What Are Tkinter Widgets?

In Tkinter, everything is a widget. A widget is a graphical element on the screen—a button, a label, a text box, a frame, or even a menu. Think of widgets as the building blocks of your GUI, just as Lego bricks are the building blocks of a model.

Every widget in Tkinter follows a strict parent–child hierarchy:

• When you create a widget, you must specify its parent container as the first argument (e.g., tk.Label(root, text="Hi")).
• The parent "owns" the child. If you destroy the parent, all its children are destroyed automatically.
• The layout of a child is always confined within the geometry of its parent.

Tkinter provides over 20 different widget classes. In this tutorial, we will explore the most essential ones in depth, understand their unique methods and options, and learn how to combine them to build functional interfaces.

2. Widget Categories – Grouping by Purpose

To make it easier to remember, we can group widgets into four broad categories:

We will now examine each widget from the original table, plus a few extra useful ones.

3. Display & Simple Input Widgets – Deep Dive

3.1 Label – Displaying Text or Images

• Purpose: Shows static text, an image, or both. The user cannot edit it directly.
• Creation: label = tk.Label(parent, text="Hello", font=("Arial", 14))
• Key Options:
  • text – the string to display.
  • image – a PhotoImage or BitmapImage object.
  • compound – combines text and image (LEFT, RIGHT, TOP, BOTTOM, CENTER).
  • font – e.g., ("Helvetica", 12, "bold").
  • fg / bg – foreground (text) colour and background colour.
  • relief – border style (FLAT, RAISED, SUNKEN, GROOVE, RIDGE).
  • wraplength – wraps text after a given number of pixels.
  • justify – LEFT, CENTER, or RIGHT for multi‑line text.
  • anchor – where the text is positioned inside the label (n, s, e, w, center, etc.).
• Important Methods: config() (to change options), cget() (to get an option value).
• Example:

photo = tk.PhotoImage(file="icon.png")
label = tk.Label(root, text="Welcome!", image=photo, compound=tk.TOP)
label.pack()

3.2 Button – Clickable Action Trigger

• Purpose: Performs an action when the user clicks it.
• Creation: btn = tk.Button(parent, text="Submit", command=my_function)
• Key Options:
  • command – the callback function to run on click.
  • state – NORMAL, DISABLED, or ACTIVE.
  • relief – changes when pressed (default is RAISED).
  • underline – underlines a character (e.g., underline=0 underlines the first letter for keyboard shortcuts).
• Important Methods:
  • .invoke() – programmatically triggers the button (calls the command).
  • .flash() – briefly flashes the button to draw attention.
• Example:

def greet():
    print("Hello!")
btn = tk.Button(root, text="Greet", command=greet, bg="lightblue")
btn.pack()

3.3 Entry – Single‑Line Text Input

• Purpose: Accepts a single line of text from the user.
• Creation: entry = tk.Entry(parent, width=30)
• Key Options:
  • show – masks the text (e.g., "*" for passwords).
  • width – width in characters (not pixels).
  • state – NORMAL or DISABLED (read‑only).
  • textvariable – binds to a StringVar for automatic updates.
  • validate / validatecommand – for input validation (e.g., only digits).
• Important Methods:
  • .get() – retrieves the current text.
  • .insert(index, string) – inserts text at a given position (e.g., entry.insert(0, "Default")).
  • .delete(first, last) – deletes characters (e.g., entry.delete(0, tk.END) clears the field).
  • .icursor(index) – sets the cursor position.
• Example:

entry = tk.Entry(root, width=20, bg="white", fg="black")
entry.insert(0, "Enter your name")
entry.pack()
name = entry.get()   # Retrieve later

3.4 Text – Multi‑Line Rich Text Area

• Purpose: Handles multiple lines of text with optional formatting (fonts, colours, tags).
• Creation: text = tk.Text(parent, height=10, width=50)
• Key Options:
  • height / width – in characters (lines and columns).
  • wrap – WORD, CHAR, or NONE (how lines break).
  • spacing1, spacing2, spacing3 – line spacing.
  • undo – enables undo/redo (True or False).
• Important Methods:
  • .get(start, end) – e.g., text.get(1.0, tk.END) gets all text. (Index 1.0 = line 1, column 0.)
  • .insert(index, string) – e.g., text.insert(tk.END, "Append").
  • .delete(start, end) – deletes a range.
  • .tag_config(tag, options) – applies styling to tagged regions (e.g., make certain words bold).
• Example:

text_area = tk.Text(root, height=10, width=40, wrap=tk.WORD)
text_area.insert(tk.END, "This is a multi-line text widget.\nYou can type here.")
text_area.pack()
content = text_area.get(1.0, tk.END)

4. Selection Widgets – Deep Dive

4.1 Checkbutton – On/Off Toggles

• Purpose: Allows the user to select zero or more options from a set (independent choices).
• Creation: chk = tk.Checkbutton(parent, text="Accept", variable=my_var)
• Key Options:
  • variable – a tk.IntVar, tk.StringVar, or tk.BooleanVar that stores the state.
  • onvalue / offvalue – the values stored when checked/unchecked (default 1 and 0 for IntVar).
  • command – a callback triggered when the state changes.
• Important Methods: .select(), .deselect(), .toggle() – programmatically change state.
• Example:

agree_var = tk.IntVar()
chk = tk.Checkbutton(root, text="I agree to terms", variable=agree_var)
chk.pack()
if agree_var.get() == 1:
    print("User agreed")

4.2 Radiobutton – Mutually Exclusive Selection

• Purpose: Presents a set of options where only one can be selected at a time.
• Creation: rb = tk.Radiobutton(parent, text="Option 1", variable=my_var, value=1)
• Key Options:
  • variable – a shared tk.IntVar or tk.StringVar for all radiobuttons in the group.
  • value – the unique value stored in the variable when this button is selected.
  • command – callback when selection changes.
• Important Note: All radiobuttons that share the same variable belong to the same group.
• Example:

choice = tk.IntVar()
rb1 = tk.Radiobutton(root, text="Small", variable=choice, value=1)
rb2 = tk.Radiobutton(root, text="Medium", variable=choice, value=2)
rb3 = tk.Radiobutton(root, text="Large", variable=choice, value=3)
rb1.pack(); rb2.pack(); rb3.pack()
# choice.get() returns 1, 2, or 3.

4.3 Listbox – Scrollable List of Items

• Purpose: Displays a list of strings from which the user can select one or more.
• Creation: lst = tk.Listbox(parent, height=5, selectmode=tk.SINGLE)
• Key Options:
  • height – number of visible rows.
  • selectmode – SINGLE, BROWSE, MULTIPLE, or EXTENDED.
  • activestyle – style of the active (focused) item.
• Important Methods:
  • .insert(index, item) – e.g., listbox.insert(tk.END, "Apple").
  • .delete(index) – removes an item.
  • .get(index) – retrieves an item.
  • .curselection() – returns a tuple of selected indices.
  • .size() – returns the number of items.
• Example:

listbox = tk.Listbox(root, height=4)
for fruit in ["Apple", "Banana", "Cherry", "Date"]:
    listbox.insert(tk.END, fruit)
listbox.pack()
selected = listbox.curselection()  # e.g., (2,)

4.4 Scale – Slider for Numeric Input

• Purpose: Selects a numeric value by sliding a knob along a trough.
• Creation: scale = tk.Scale(parent, from_=0, to=100, orient=tk.HORIZONTAL)
• Key Options:
  • from_ / to – the numeric range (note the trailing underscore because from is a Python keyword).
  • orient – tk.HORIZONTAL or tk.VERTICAL.
  • resolution – step size (e.g., 0.5).
  • length – length of the slider in pixels.
  • variable – bound to an IntVar or DoubleVar.
  • command – callback function that receives the current value.
• Important Methods: .get() and .set(value).
• Example:

def show_volume(val):
    print(f"Volume: {val}")
scale = tk.Scale(root, from_=0, to=100, orient=tk.HORIZONTAL,
                 command=show_volume, length=200)
scale.pack()

5. Container & Structure Widgets – Deep Dive

5.1 Frame – The Ultimate Organiser

• Purpose: A rectangular container that groups other widgets together. Frames are essential for complex layouts.
• Creation: frame = tk.Frame(parent, bg="lightgrey", relief=tk.RAISED, bd=2)
• Key Options:
  • bg / background – background colour.
  • relief – border style.
  • bd / borderwidth – border thickness.
  • width / height – dimensions (though frames usually expand to fit their contents).
• Important Methods: None specific – it mainly uses geometry managers (pack, grid, place) on its children.
• Example:

main_frame = tk.Frame(root, bg="white", relief=tk.GROOVE, bd=2)
main_frame.pack(padx=10, pady=10)
label = tk.Label(main_frame, text="I am inside a frame")
label.pack()

5.2 LabelFrame – A Framed Group with a Title

• Purpose: Exactly like a Frame, but it draws a border around itself and displays a caption (like a "group box").
• Creation: lframe = tk.LabelFrame(parent, text="User Details", padx=5, pady=5)
• Example:

group = tk.LabelFrame(root, text="Contact Info", padx=10, pady=10)
group.pack(padx=10, pady=10)
tk.Entry(group).pack()  # entry inside this group

6. Advanced & Specialised Widgets – Deep Dive

6.1 Canvas – The Drawing Board

• Purpose: A flexible area for drawing lines, shapes, text, and even embedding other widgets or images.
• Creation: canvas = tk.Canvas(parent, width=400, height=300, bg="white")
• Key Options:
  • width / height – in pixels.
  • bg – background colour.
  • scrollregion – defines a virtual canvas area (used with scrollbars).
• Important Methods (Drawing):
  • .create_line(x1, y1, x2, y2, fill="red", width=2)
  • .create_rectangle(x1, y1, x2, y2, fill="blue", outline="black")
  • .create_oval(x1, y1, x2, y2, fill="green")
  • .create_text(x, y, text="Hello", font=("Arial", 12))
  • .create_image(x, y, image=photo)
• Important Methods (Manipulation):
  • .move(item_id, dx, dy) – moves an item.
  • .delete(item_id) – removes an item.
  • .itemconfig(item_id, options) – changes an item's attributes.
• Example:

c = tk.Canvas(root, width=200, height=100, bg="lightyellow")
rect = c.create_rectangle(50, 25, 150, 75, fill="red")
c.pack()

6.2 Menu – The Top‑Level Menu Bar

• Purpose: Creates a pull‑down or cascading menu system at the top of the window.
• Creation:
  1. Create the menu bar: menubar = tk.Menu(root)
  2. Attach to root: root.config(menu=menubar)
  3. Create sub‑menus: file_menu = tk.Menu(menubar, tearoff=0)
  4. Add to bar: menubar.add_cascade(label="File", menu=file_menu)
  5. Add commands/separators: file_menu.add_command(label="Open", command=open_func), file_menu.add_separator(), etc.
• Key Options:
  • tearoff=0 – disables the dotted line that lets you detach the menu.
  • underline – keyboard shortcut (e.g., underline=0 for "F" in "File").
• Important Methods: .add_command(), .add_cascade(), .add_separator(), .add_checkbutton(), .add_radiobutton().
• Example:

menubar = tk.Menu(root)
root.config(menu=menubar)
file_menu = tk.Menu(menubar, tearoff=0)
menubar.add_cascade(label="File", menu=file_menu)
file_menu.add_command(label="Exit", command=root.destroy)

6.3 Scrollbar – The Navigation Helper

• Purpose: Adds a scroll bar to another widget (e.g., Text, Listbox, Canvas).
• Important: A Scrollbar does not work alone; it must be linked to a scrollable widget using a two‑way binding.
• Creation: scroll = tk.Scrollbar(parent, orient=tk.VERTICAL)
• Binding Pattern:
  • Set the widget's yscrollcommand (or xscrollcommand) to the scrollbar's .set method.
  • Set the scrollbar's command to the widget's .yview (or .xview) method.
• Example (with Listbox):

listbox = tk.Listbox(root, height=4)
scroll = tk.Scrollbar(root, orient=tk.VERTICAL, command=listbox.yview)
listbox.config(yscrollcommand=scroll.set)

listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
scroll.pack(side=tk.RIGHT, fill=tk.Y)

7. Configuration – Setting and Changing Widget Options

7.1 Setting Options at Creation

You pass options as keyword arguments:

btn = tk.Button(root, text="Click", font=("Arial", 10), bg="yellow")

7.2 Changing Options After Creation – .config() (or .configure())

btn.config(text="New Label", bg="blue")

You can change almost any option at any time.

7.3 Retrieving Options – .cget()

current_text = btn.cget("text")
print(current_text)   # Prints "New Label"

7.4 Getting All Options – .keys()

print(btn.keys())   # Lists all configurable option names

7.5 The Importance of textvariable vs. text

• If you use textvariable (e.g., my_var = tk.StringVar()) and bind it to a widget, the widget automatically updates when my_var.set() is called. This is more efficient than repeatedly calling .config().
• Example:

var = tk.StringVar()
label = tk.Label(root, textvariable=var)
var.set("Initial")   # Label updates instantly!

8. Common Methods Shared by All Widgets

Every widget inherits from the BaseWidget class and shares these methods:

• .config(**options) – change one or more options.
• .cget(option) – get the value of an option.
• .destroy() – delete the widget.
• .winfo_*() – a family of methods to get window information (e.g., .winfo_width(), .winfo_height(), .winfo_children()).
• .focus_set() – give keyboard focus to this widget.
• .bind(event, callback) – bind an event to a function (keyboard, mouse, etc.).
• .tk – returns the Tcl interpreter object (rarely needed).

9. Check Your Understanding (Quizzes)

Quiz 1: Multiple Choice

1. Which widget would you use to let the user select exactly one option from a group of five?
   • A) Checkbutton
   • B) Radiobutton
   • C) Listbox
   • D) Scale

1. Which method retrieves the current text from an Entry widget?
   • A) .get()
   • B) .text()
   • C) .retrieve()
   • D) .content()

1. You want to create a password input field. Which option should you set?
   • A) password="*"
   • B) show="*"
   • C) mask="*"
   • D) hidden=True

1. Which widget is best suited to display a multi‑line text area that the user can edit?
   • A) Label
   • B) Entry
   • C) Text
   • D) Canvas

1. What is the first argument you pass when creating any widget?
   • A) The width
   • B) The parent container
   • C) The text
   • D) The command

Quiz 2: True or False

1. True / False: A Frame widget must always have a background colour set, otherwise it is invisible.

1. True / False: Radiobutton widgets that share the same variable automatically belong to the same group.

1. True / False: The Listbox widget allows the user to type directly into the list.

1. True / False: You can draw shapes (like circles and rectangles) on a Canvas widget.

1. True / False: Calling .config() on a widget can only be done once—after creation, the options are locked.

Quiz 3: Fill in the Blanks

1. To append an item to the end of a Listbox, you use listbox.insert(tk.____, "New Item").

1. A Scale widget uses the parameter from_ because ____ is a reserved Python keyword.

1. The method used to delete all text from an Entry widget is entry.delete(0, tk.____).

1. To link a vertical Scrollbar to a Text widget, you set the yscrollcommand option of the Text widget to scrollbar.____.

1. The Canvas method to draw a rectangle is .create_____(x1, y1, x2, y2, ...).

Quiz 4: Matching

Match the widget to its primary method:

10. Hands‑On Lab (In‑Class Exercises)

Exercise 1: Widget Identification

Write a Tkinter application that contains the following widgets:

• A Label with the text "User Registration".
• Two Entry widgets (for username and password) with appropriate labels placed before them.
• A Checkbutton labelled "Remember Me".
• A Button labelled "Register" that, when clicked, prints the current content of both entries and the checkbox state to the terminal.
• A Radiobutton group with three options: "Admin", "User", "Guest" with an IntVar to store the selection.
• Use Frame to group the username/password entries together and another Frame for the radiobuttons.
• Bonus: Add a Scale from 1 to 10 for "Experience Level".

Exercise 2: Scrollable Text Editor

Create a window with a large Text widget and a vertical Scrollbar that is properly linked. Also add a Button at the bottom that, when clicked, prints all the text in the console.

Exercise 3: Canvas Shapes

Write a script that draws a yellow sun (a circle) in the top‑left corner and a green rectangle (representing grass) at the bottom of a Canvas that is 400x300 pixels. Add a Button that, when clicked, moves the sun 10 pixels to the right (use .move()).

Exercise 4: Dynamic Configuration

Create a window with a Label that says "Click to change". Add a Button below it. Every time the button is clicked, change the Label's text to the current time (strftime) and change its background colour to a random colour (use random.choice from a list). Use .config() to achieve this.

11. Homework Assignment

Objective

Demonstrate your mastery of Tkinter widgets by building a functional registration form, analysing code, and researching deeper capabilities.

Part A: Build a Complete Registration Form (20 points)

Write a Python script that creates a window with the following specifications:

• Title: "Registration Form"
• Geometry: 500x400, non‑resizable.
• Widgets (organised using Frames and grid/pack):
  1. A Label at the top with "Create Your Account" in large bold font (size 16).
  2. Personal Details Frame: Labels and Entry fields for: Full Name, Email, Phone Number.
  3. Gender Frame: Radiobutton group for Male, Female, Other (use a StringVar).
  4. Interests Frame: Three Checkbutton widgets: Sports, Music, Reading (use IntVar for each).
  5. Age Frame: A Scale from 18 to 100 with a tick label every 10 years.
  6. Action Buttons: A "Submit" button and a "Clear" button.
     • Submit: Prints all the entered/selected values (name, email, phone, gender, interests that are checked, age) neatly to the console.
     • Clear: Clears all entry fields, resets the radiobuttons to none, unchecks all checkboxes, and resets the scale to 18.
• Layout: Use at least two different Frame containers to organise the layout. You may use grid() inside frames and pack() for the outer structure.

Part B: Code Analysis and Correction (10 points)

Examine the following code snippet. It is supposed to create a simple ordering system with a listbox, but it contains four logical or syntactical errors. Identify each error, explain why it is a problem, and provide the corrected code.

import tkinter as tk

root = tk.Tk()
root.title("Order")

items = ["Pizza", "Burger", "Pasta", "Salad"]
listbox = tk.Listbox(root, height=4, selectmode=tk.MULTIPLE)
for item in items:
    listbox.insert(0, item)   # Error 1
listbox.pack()

def show_order():
    selected = listbox.get(tk.ACTIVE)   # Error 2
    print("You selected:", selected)

btn = tk.Button(root, text="Show Order", command=show_order)
btn.pack()

# Error 3: Scrollbar is created but never linked or packed properly
scroll = tk.Scrollbar(root, orient=tk.HORIZONTAL)
scroll.pack(side=tk.RIGHT, fill=tk.Y)

# Error 4: Missing the mainloop call

import tkinter as tk
root = tk.Tk()
root.title("Order")
items = ["Pizza", "Burger", "Pasta", "Salad"]
listbox = tk.Listbox(root, height=4, selectmode=tk.MULTIPLE)
for item in items:
    listbox.insert(tk.END, item)
listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
scroll = tk.Scrollbar(root, orient=tk.VERTICAL, command=listbox.yview)
listbox.config(yscrollcommand=scroll.set)
scroll.pack(side=tk.RIGHT, fill=tk.Y)
def show_order():
    selected_indices = listbox.curselection()
    selected_items = [listbox.get(i) for i in selected_indices]
    print("You selected:", selected_items)
btn = tk.Button(root, text="Show Order", command=show_order)
btn.pack()
root.mainloop()

Part C: Widget Research – The PanedWindow (5 points)

Research the PanedWindow widget (not covered in detail above). Write a short paragraph (4‑6 sentences) explaining:

• What it is used for.
• How it differs from a normal Frame.
• A practical scenario where you would use it.
• Provide a minimal code example showing a PanedWindow with two Label widgets inside.

Part D: Event Binding with Widgets (5 points)

Write a small script that creates an Entry widget and a Label. Bind the <KeyRelease> event to the Entry so that every time the user types a character, the label automatically updates to show the current text of the entry (character count or the text itself). Hint: Use .get() on the entry inside the callback.

Part E: Reflection (5 points)

Write a short paragraph (5‑7 sentences) answering: "Why is the Frame widget considered one of the most important widgets in Tkinter, even though it does not directly display any useful information to the user?" Use examples from this tutorial and your own reasoning.

12. Summary of Key Terms (Glossary)

13. Further Resources for Self‑Study

• Tkinter Widget Reference: https://docs.python.org/3/library/tkinter.html#widgets
• Tkinter Canvas Tutorial: Detailed explanation of all drawing primitives.
• Effbot Tkinter Reference: An older but comprehensive reference for all widget options.
• Practice: Extend the registration form from Part A to save the data to a file (JSON/CSV) when "Submit" is clicked – a preview of real‑world integration.

This tutorial is designed to take approximately 3 hours of study, lab work, and homework. By the end, you should be comfortable creating any basic GUI using the most common Tkinter widgets and understand how to configure and manipulate them dynamically.

Previous | Tutorial index | Next