Form Layout

The Form layout in Fyne arranges widgets in a two-column style with labels on the left and input fields on the right. It is commonly used to build forms such as login screens, registration pages, or settings panels.

Basic

Show Code

package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/layout"
  "fyne.io/fyne/v2/widget"
)

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Basic Form Layout")

  // Input fields
  nameEntry := widget.NewEntry()
  nameEntry.SetPlaceHolder("Enter your full name")

  emailEntry := widget.NewEntry()
  emailEntry.SetPlaceHolder("Enter your email")

  passwordEntry := widget.NewPasswordEntry()
  passwordEntry.SetPlaceHolder("Enter password")

  // Buttons
  submitBtn := widget.NewButton("Register", func() {
    println("Submitted:", nameEntry.Text, emailEntry.Text)
  })
  cancelBtn := widget.NewButton("Clear", func() {
    nameEntry.SetText("")
    emailEntry.SetText("")
    passwordEntry.SetText("")
  })

  // Create form using FormLayout
  form := container.New(
    layout.NewFormLayout(),
    widget.NewLabel("Name:"), nameEntry,
    widget.NewLabel("Email:"), emailEntry,
    widget.NewLabel("Password:"), passwordEntry,
    widget.NewLabel(""), container.NewHBox(submitBtn, cancelBtn),
  )

  // Center the form in the window
  content := container.NewCenter(form)

  myWindow.SetContent(content)
  myWindow.Resize(fyne.NewSize(500, 400))
  myWindow.ShowAndRun()
}

Advanced

Show Code

package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/widget"
)

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Advanced Form Layout")

  // Create input fields
  nameEntry := widget.NewEntry()
  nameEntry.SetPlaceHolder("Enter your full name")

  emailEntry := widget.NewEntry()
  emailEntry.SetPlaceHolder("Enter your email")

  passwordEntry := widget.NewPasswordEntry()
  passwordEntry.SetPlaceHolder("Enter password")

  // Create form
  form := &widget.Form{
    Items: []*widget.FormItem{
      {Text: "Name", Widget: nameEntry},
      {Text: "Email", Widget: emailEntry},
      {Text: "Password", Widget: passwordEntry},
    },
    OnSubmit: func() {
      // Handle form submit
      println("Submitted: ", nameEntry.Text, emailEntry.Text)
    },
    OnCancel: func() {
      println("Form cancelled")
    },
  }

  // Center the form
  content := container.NewCenter(form)

  myWindow.SetContent(content)
  myWindow.Resize(fyne.NewSize(500, 400))
  myWindow.ShowAndRun()
}