Skip to content
Gx
GitHub

Label

A caption for a form control.

Open the preview in a new tab 

<label.Label for="email">Email</label.Label>

Installation

Run the command in the app module.

Terminal
gx add label

The command writes these files.

File Path in the app
Label.gx ui/label/Label.gx
Label.fixtures.go ui/label/Label.fixtures.go
styles.go ui/label/styles.go

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/label/Label.gx
package label

props {
  // For is the id of the control that the label names. Empty omits the for attribute.
  For      string = ""
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the label text.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<label data-slot="label" class={gx.Cx("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", p.Class)} {...p.attrs()}>{p.Children}</label>
ui/label/Label.fixtures.go
package label

import "github.com/alternayte/gx"

var LabelFixtures = gx.Fixtures[LabelProps]{
	"Plain": {For: "email", Children: gx.Text("Email")},
}
ui/label/styles.go
package label

import "github.com/alternayte/gx"

// attrs returns the for attribute when the label names a control, then the
// caller's attributes.
func (p LabelProps) attrs() gx.Attrs {
	if p.For == "" {
		return p.Attrs
	}
	return append(gx.Attrs{{Key: "for", Value: p.For}}, p.Attrs...)
}

Usage

<label.Label for="email">Email</label.Label>
<input id="email" name="email" type="email" />

The label dims when its control is a disabled peer, or when a parent group has data-disabled="true".

Examples

Plain

Open the preview in a new tab 

<label.Label for="email">Email</label.Label>

API reference

A tag sets a prop by its name with a lower-case first letter: Class is class.

label.Label

Prop Type Default Description
For string "" For is the id of the control that the label names. Empty omits the for attribute.
Class string "" Class adds classes to the root element.
Children gx.Node Required Children is the label text.
Attrs gx.Attrs nil Attrs adds HTML attributes to the root element.

Do and do not

Do

  • Point For at the id of the control.
  • Keep the label short.

Don't

  • Do not use placeholder text as the only label.
  • Do not point For at an element that is not a form control.

Keyboard

Key Action
(none) Clicking the label moves focus to its control.