components

package
v0.0.0-...-fd61a54 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Mar 10, 2025 License: MIT Imports: 10 Imported by: 0

Documentation

Overview

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

templ: version: v0.3.833

Index

Constants

This section is empty.

Variables

View Source 
var (
	// DateLocaleSpanish provides Spanish localization
	DateLocaleSpanish = DateLocale{
		MonthNames: []string{"Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
			"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"},
		DayNames: []string{"Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"},
	}

	// DateLocaleGerman provides German localization
	DateLocaleGerman = DateLocale{
		MonthNames: []string{"Januar", "Februar", "März", "April", "Mai", "Juni",
			"Juli", "August", "September", "Oktober", "November", "Dezember"},
		DayNames: []string{"Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"},
	}

	// DateLocaleFrench provides French localization
	DateLocaleFrench = DateLocale{
		MonthNames: []string{"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
			"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"},
		DayNames: []string{"Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"},
	}

	// DateLocaleItalian provides Italian localization
	DateLocaleItalian = DateLocale{
		MonthNames: []string{"Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno",
			"Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"},
		DayNames: []string{"Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"},
	}

	// DateLocaleJapanese provides Japanese localization
	DateLocaleJapanese = DateLocale{
		MonthNames: []string{"1月", "2月", "3月", "4月", "5月", "6月",
			"7月", "8月", "9月", "10月", "11月", "12月"},
		DayNames: []string{"日", "月", "火", "水", "木", "金", "土"},
	}
)

Pre-defined locales for different languages

View Source 
var (
	// DatePickerISO provides ISO format with default locale
	DatePickerISO = DatePickerConfig{
		Format: DateFormatISO,
		Locale: DateLocaleDefault,
	}

	// DatePickerEU provides European format with default locale
	DatePickerEU = DatePickerConfig{
		Format: DateFormatEU,
		Locale: DateLocaleDefault,
	}

	// DatePickerUK provides UK format with default locale
	DatePickerUK = DatePickerConfig{
		Format: DateFormatUK,
		Locale: DateLocaleDefault,
	}

	// DatePickerUS provides US format with default locale
	DatePickerUS = DatePickerConfig{
		Format: DateFormatUS,
		Locale: DateLocaleDefault,
	}

	// DatePickerUS provides US format with default locale
	DatePickerLONG = DatePickerConfig{
		Format: DateFormatLONG,
		Locale: DateLocaleDefault,
	}
)
View Source 
var DateLocaleDefault = DateLocale{
	MonthNames: []string{"January", "February", "March", "April", "May", "June",
		"July", "August", "September", "October", "November", "December"},
	DayNames: []string{"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"},
}

DateLocaleDefault and other locale presets

View Source 
var TemplFiles embed.FS

Functions

func Accordion 

func Accordion(props AccordionProps) templ.Component

func Alert 

func Alert(props AlertProps) templ.Component

Alert renders a status message component

func AlertDescription 

func AlertDescription() templ.Component

AlertDescription renders the body content

func AlertTitle 

func AlertTitle() templ.Component

AlertTitle renders the heading section

func AspectRatio 

func AspectRatio(props AspectRatioProps) templ.Component

A component for maintaining consistent width-to-height ratios across different screen sizes.

func Avatar 

func Avatar(props AvatarProps) templ.Component

Avatar renders a user avatar image or initials

func Badge 

func Badge(props BadgeProps) templ.Component
func Breadcrumb(props BreadcrumbProps) templ.Component

Navigation component that helps users understand their location within a website's hierarchy.

func Button 

func Button(props ButtonProps) templ.Component

Button renders an interactive element for triggering actions

func Card 

func Card(props CardProps) templ.Component

Container for organizing related content and

func CardContent 

func CardContent() templ.Component

CardContent renders the main content area of a card.

func CardDescription 

func CardDescription() templ.Component

CardDescription renders the description of a card.

func CardFooter 

func CardFooter() templ.Component

CardFooter renders the footer section of a card.

func CardHeader 

func CardHeader() templ.Component

CardHeader renders the header section of a card.

func CardImage 

func CardImage(props CardImageProps) templ.Component

CardImage renders an image section within the card

func CardTitle 

func CardTitle() templ.Component

CardTitle renders the title of a card. 

func Carousel(props CarouselProps) templ.Component

Carousel renders a responsive image and content slider

func CarouselScript 

func CarouselScript() templ.Component

func Chart 

func Chart(props ChartProps) templ.Component

Beautiful charts. Built using Chart.js.

func ChartScripts 

func ChartScripts() templ.Component

ChartScripts ensures Chart.js and initialization code is only loaded once per page This prevents duplicate script loading when multiple charts are used

func Checkbox 

func Checkbox(props CheckboxProps) templ.Component

Checkbox renders a styled checkbox input with customizable icon

func CheckboxCard 

func CheckboxCard(props CheckboxCardProps) templ.Component

CheckboxCard creates a selectable card component with minimal styling approach

func Code 

func Code(p CodeProps) templ.Component

Code displays a code block with optional syntax highlighting and copy functionality

func CodeScript 

func CodeScript() templ.Component

func DatePicker 

func DatePicker(props DatePickerProps) templ.Component

DatePicker renders a date selection input with calendar popup

func DatePickerScript 

func DatePickerScript() templ.Component
func DropdownMenu(props DropdownMenuProps) templ.Component

Floating menu for displaying a list of actions or options. 

func DropdownMenuScript() templ.Component

func FormDescription 

func FormDescription(props FormDescriptionProps) templ.Component

FormDescription renders helper text below form elements

func FormItem 

func FormItem(props FormItemProps) templ.Component

FormItem wraps form elements in a vertical layout

func FormItemFlex 

func FormItemFlex(props FormItemProps) templ.Component

FormItemFlex wraps form elements in a horizontal layout

func FormLabel 

func FormLabel(props FormLabelProps) templ.Component

FormLabel renders a form label

func FormMessage 

func FormMessage(props FormMessageProps) templ.Component

FormMessage renders feedback messages

func Input 

func Input(props InputProps) templ.Component

Input renders a styled form input field

func InputOTP 

func InputOTP(props InputOTPProps) templ.Component

InputOTP renders a one-time password input field divided into individual digit inputs

func InputOTPScript 

func InputOTPScript() templ.Component

func Label 

func Label(props LabelProps) templ.Component

Label renders a form label with error and disabled states

func LabelScript 

func LabelScript() templ.Component
func Modal(props ModalProps) templ.Component

Dialog overlay that requires user attention or interaction.

func ModalBody 

func ModalBody() templ.Component

/ ModalBody renders the main modal content area

func ModalClose 

func ModalClose(id string) templ.Component

ModalClose creates clickable elements that close a modal

func ModalFooter 

func ModalFooter() templ.Component

ModalFooter renders the modal action buttons section

func ModalHeader 

func ModalHeader() templ.Component

ModalHeader renders the modal title section

func ModalScript 

func ModalScript() templ.Component

func ModalTrigger 

func ModalTrigger(id string) templ.Component

ModalTrigger creates clickable elements that open a modal

func Pagination 

func Pagination(props PaginationProps) templ.Component

Pagination provides navigation through multiple pages of content with various layout and styling options.

func Progress 

func Progress(props ProgressProps) templ.Component

Progress renders a progress bar component

func Radio 

func Radio(props RadioProps) templ.Component

Radio renders a styled radio input button

func RadioCard 

func RadioCard(props RadioCardProps) templ.Component

Selectable card component that uses radio buttons for single-option selection.

func Rating 

func Rating(props RatingProps) templ.Component

Rating component for user ratings and feedback

func RatingScript 

func RatingScript() templ.Component

Interactive Rating component with Alpine.js

func Select 

func Select(props SelectProps) templ.Component

Select renders a styled dropdown selection input

func Separator 

func Separator(props SeparatorProps) templ.Component

Separator creates a visual divider between content with optional label

Props:

  • Orientation: Direction of the separator ("horizontal" or "vertical"). Default: "horizontal"
  • Decoration: Decoration style (none, dashed, dotted). Default: none
  • Label: Optional text to display in the middle of the separator
  • Class: Additional CSS classes to apply
  • Attributes: Additional HTML attributes to apply

func Sheet 

func Sheet(props SheetProps) templ.Component

Side-anchored panel that slides in from screen edges.

func SheetClose 

func SheetClose(text string) templ.Component

SheetClose creates a button that closes the sheet Must be used within Sheet

func SheetRoot 

func SheetRoot() templ.Component

SheetRoot initializes Alpine.js state and event handlers Must wrap Sheet components and triggers

func SheetScript 

func SheetScript() templ.Component

func SheetTrigger 

func SheetTrigger(text string, side SheetSide) templ.Component

SheetTrigger creates elements that open the sheet Must be used within SheetRoot

func Skeleton 

func Skeleton(props SkeletonProps) templ.Component

Skeleton creates a placeholder element that indicates content is loading It's designed to be a simple building block that users can compose into more complex loading UI patterns

func Slider 

func Slider(props SliderProps) templ.Component

Control for selecting a numeric value within a range.

func SliderScript 

func SliderScript() templ.Component

func Spinner 

func Spinner(props SpinnerProps) templ.Component

Spinner component for indicating loading states with customizable options

func Tabs 

func Tabs(props TabsProps) templ.Component

func TabsScript 

func TabsScript() templ.Component

func Textarea 

func Textarea(props TextareaProps) templ.Component

Textarea renders a multi-line text input field

func TextareaScript 

func TextareaScript() templ.Component

func TimePicker 

func TimePicker(props TimePickerProps) templ.Component

A native time selector with support for 12/24 hour formats.

func TimePickerScript 

func TimePickerScript() templ.Component

func Toast 

func Toast(props ToastProps) templ.Component

func ToastScript 

func ToastScript() templ.Component

Flexible toast component for notifications and feedback.

func Toggle 

func Toggle(props ToggleProps) templ.Component

Toggle renders a styled switch input

func Tooltip 

func Tooltip(props TooltipProps) templ.Component

A small pop-up box that appears when a user hovers over an element

Types

type AccordionItem 

type AccordionItem struct {
	ID      string          // Unique identifier for state management
	Trigger templ.Component // Header content that toggles section
	Content templ.Component // Expandable section content
}

type AccordionProps 

type AccordionProps struct {
	Items      []AccordionItem  // Array of accordion sections
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

AccordionProps configures the Accordion component

type AlertProps 

type AlertProps struct {
	Variant AlertVariant // Visual style variant
	Class   string       // Additional CSS classes
}

type AlertVariant 

type AlertVariant string
const (
	AlertVariantDefault     AlertVariant = "default"
	AlertVariantDestructive AlertVariant = "destructive"
)

type AspectRatioProps 

type AspectRatioProps struct {
	Ratio      AspectRatioType
	Class      string
	Attributes templ.Attributes
}

type AspectRatioType 

type AspectRatioType int

AspectRatioType defines the available aspect ratio types as an enum 

const (
	AspectRatioAuto     AspectRatioType = iota // Determined by content
	AspectRatioSquare                          // 1:1 ratio
	AspectRatioVideo                           // 16:9 ratio
	AspectRatioPortrait                        // 3:4 ratio
	AspectRatioWide                            // 2:1 ratio
)

type AvatarProps 

type AvatarProps struct {
	ImageSrc   string           // URL of avatar image
	Name       string           // Name for generating initials
	Size       AvatarSize       // Size variant
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type AvatarSize 

type AvatarSize string
const (
	AvatarSizeSmall  AvatarSize = "small"
	AvatarSizeMedium AvatarSize = "medium"
	AvatarSizeLarge  AvatarSize = "large"
)

type BadgeProps 

type BadgeProps struct {
	Class      string           // Additional CSS classes
	Text       string           // Badge text content
	Variant    BadgeVariant     // Visual style variant
	IconBefore templ.Component  // Icon to display before the text
	IconAfter  templ.Component  // Icon to display after the text
	Attributes templ.Attributes // Additional HTML attributes
}

type BadgeVariant 

type BadgeVariant string
const (
	BadgeVariantDefault     BadgeVariant = "default"
	BadgeVariantSecondary   BadgeVariant = "secondary"
	BadgeVariantDestructive BadgeVariant = "destructive"
	BadgeVariantOutline     BadgeVariant = "outline"
)
type BreadcrumbItem struct {
	Label      string           // Display text for the breadcrumb item
	Href       string           // URL to navigate to when clicked
	Icon       templ.Component  // Optional icon to display before the label
	Current    bool             // Whether this item represents the current page
	Attributes templ.Attributes // Additional HTML attributes
}

BreadcrumbItem represents a single item in the breadcrumb trail 

type BreadcrumbProps struct {
	Items      []BreadcrumbItem // Array of breadcrumb items to display
	Separator  templ.Component  // Custom separator between items (defaults to chevron)
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

BreadcrumbProps configures the Breadcrumb component

type ButtonProps 

type ButtonProps struct {
	Class      string           // Additional CSS classes
	Text       string           // Button label text
	Variant    ButtonVariant    // Visual style
	Size       ButtonSize       // Button dimensions
	FullWidth  bool             // Expand to fill container
	Href       string           // URL for link buttons
	Target     string           // Link target attribute
	Disabled   bool             // Interactivity state
	Type       string           // Button type attribute
	IconLeft   templ.Component  // Icon component before text
	IconRight  templ.Component  // Icon component after text
	HxGet      string           // HTMX: URL for GET requests
	HxPost     string           // HTMX: URL for POST requests
	HxPut      string           // HTMX: URL for PUT requests
	HxDelete   string           // HTMX: URL for DELETE requests
	HxTrigger  string           // HTMX: Trigger event
	HxTarget   string           // HTMX: Target for response
	HxSwap     string           // HTMX: Method for inserting response
	Attributes templ.Attributes // Additional HTML attributes
}

ButtonProps configures the Button component

type ButtonSize 

type ButtonSize string

ButtonSize defines the dimensions of the button 

const (
	ButtonSizeMd   ButtonSize = "md"
	ButtonSizeSm   ButtonSize = "sm"
	ButtonSizeLg   ButtonSize = "lg"
	ButtonSizeIcon ButtonSize = "icon"
)

Button sizes

type ButtonVariant 

type ButtonVariant string

ButtonVariant defines the visual style of the button 

const (
	ButtonVariantDefault     ButtonVariant = "default"
	ButtonVariantDestructive ButtonVariant = "destructive"
	ButtonVariantOutline     ButtonVariant = "outline"
	ButtonVariantSecondary   ButtonVariant = "secondary"
	ButtonVariantGhost       ButtonVariant = "ghost"
	ButtonVariantLink        ButtonVariant = "link"
)

Button variants

type CardImagePosition 

type CardImagePosition string
const (
	CardImageTop    CardImagePosition = "top"
	CardImageBottom CardImagePosition = "bottom"
	CardImageLeft   CardImagePosition = "left"
	CardImageRight  CardImagePosition = "right"
)

type CardImageProps 

type CardImageProps struct {
	Src         string            // Image URL
	Alt         string            // Image alt text
	Class       string            // Additional CSS classes
	AspectRatio string            // Aspect ratio for image
	Position    CardImagePosition // Image position
	Width       string            // Image width
}

type CardProps 

type CardProps struct {
	Horizontal bool             // Enables horizontal layout for side images
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type CarouselProps 

type CarouselProps struct {
	ID             string           // Unique identifier for the carousel
	Slides         []CarouselSlide  // Array of carousel slides
	ShowControls   bool             // Whether to display previous/next buttons
	ShowIndicators bool             // Whether to display pagination indicators
	Autoplay       bool             // Whether the carousel should autoplay
	Interval       int              // Autoplay interval in milliseconds (default: 5000)
	Loop           bool             // Whether the carousel should loop back to the beginning
	Class          string           // Additional CSS classes
	Attributes     templ.Attributes // Additional HTML attributes
}

CarouselProps configures the Carousel component

type CarouselSlide 

type CarouselSlide struct {
	Content     templ.Component  // Main content of the slide
	Description string           // Optional description
	Attributes  templ.Attributes // Additional HTML attributes for each slide
}

CarouselSlide represents an individual slide in the carousel

type ChartConfig 

type ChartConfig struct {
	Type        ChartType    `json:"type"`                 // Type of chart (line, bar, etc.)
	Data        ChartData    `json:"data"`                 // Data and datasets
	Options     ChartOptions `json:"options,omitempty"`    // Chart display options
	ShowLegend  bool         `json:"showLegend,omitempty"` // Whether to display the legend
	ShowXAxis   bool         `json:"showXAxis"`            // Whether to display the X-axis line
	ShowYAxis   bool         `json:"showYAxis"`            // Whether to display the Y-axis line
	ShowXLabels bool         `json:"showXLabels"`          // Whether to display X-axis labels
	ShowYLabels bool         `json:"showYLabels"`          // Whether to display Y-axis labels
	ShowXGrid   bool         `json:"showXGrid"`            // Whether to display X-axis grid lines
	ShowYGrid   bool         `json:"showYGrid"`            // Whether to display Y-axis grid lines
	Horizontal  bool         `json:"horizontal"`           // Whether the chart should be horizontal
	Stacked     bool         `json:"stacked"`              // Whether datasets should be stacked
}

ChartConfig represents the complete Chart.js configuration This is the full configuration that gets passed to Chart.js

type ChartData 

type ChartData struct {
	Labels   []string       `json:"labels"`   // Labels for data points (X-axis labels for most charts)
	Datasets []ChartDataset `json:"datasets"` // Array of datasets to be displayed
}

ChartData represents all data needed for Chart.js Contains both the dataset and labels

type ChartDataset 

type ChartDataset struct {
	Label           string    `json:"label"`                     // Name of the dataset to be displayed in legend
	Data            []float64 `json:"data"`                      // Actual data points for the chart
	BorderWidth     int       `json:"borderWidth,omitempty"`     // Width of the line/bar border in pixels
	BorderColor     string    `json:"borderColor,omitempty"`     // Color of the line/bar border
	BackgroundColor string    `json:"backgroundColor,omitempty"` // Background/fill color of the chart elements
	Tension         float64   `json:"tension,omitempty"`         // Smoothing of the line (0 = straight lines, 1 = maximum curve)
	Fill            bool      `json:"fill,omitempty"`            // Whether to fill the area under the line
	Stepped         bool      `json:"stepped,omitempty"`         // Whether to draw the line as a stepped line
}

ChartDataset represents a dataset for Chart.js Contains the data points and visual styling for a single data series

type ChartOptions 

type ChartOptions struct {
	Responsive bool `json:"responsive,omitempty"` // Whether the chart should resize with its container
	Legend     bool `json:"legend,omitempty"`     // Whether to display the legend
}

ChartOptions represents Chart.js options Contains general chart configuration options

type ChartProps 

type ChartProps struct {
	Type        ChartType    // Type of chart to render
	Data        ChartData    // Data to display in the chart
	Options     ChartOptions // Additional chart options
	ShowLegend  bool         // Whether to display the legend
	ShowXAxis   bool         // Whether to display the X-axis line
	ShowYAxis   bool         // Whether to display the Y-axis line
	ShowXLabels bool         // Whether to display X-axis labels
	ShowYLabels bool         // Whether to display Y-axis labels
	ShowXGrid   bool         // Whether to display X-axis grid lines
	ShowYGrid   bool         // Whether to display Y-axis grid lines
	Horizontal  bool         // Whether the chart should be horizontal
	Stacked     bool         // Whether datasets should be stacked
	Class       string       // Additional CSS classes
}

ChartProps for the Chart component Properties that can be passed to the Chart component

type ChartType 

type ChartType string
const (
	ChartTypeBar      ChartType = "bar"
	ChartTypeLine     ChartType = "line"
	ChartTypePie      ChartType = "pie"
	ChartTypeDoughnut ChartType = "doughnut"
	ChartTypeRadar    ChartType = "radar"
)

type CheckboxCardProps 

type CheckboxCardProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Value       string           // Checkbox value
	Checked     bool             // Selected state
	Disabled    bool             // Prevents interaction
	Required    bool             // Required
	Title       string           // Card title
	Description string           // Card description
	Icon        templ.Component  // Optional icon
	Footer      templ.Component  // Optional footer content
	Class       string           // Additional CSS classes for the card
	Attributes  templ.Attributes // Additional HTML attributes
}

CheckboxCardProps configures the CheckboxCard component

type CheckboxProps 

type CheckboxProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Value      string           // Checkbox value
	Disabled   bool             // Prevents interaction
	Required   bool             // Required
	Checked    bool             // Selected state
	Icon       templ.Component  // Custom check icon
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

CheckboxProps configures the Checkbox component

type CodeProps 

type CodeProps struct {
	Language       string   // Programming language for syntax highlighting
	ShowCopyButton bool     // Whether to show the copy button
	Size           CodeSize // Size of the code block
	Class          string   // Additional classes for the wrapper div
	CodeClass      string   // Additional classes for the code element
}

type CodeSize 

type CodeSize string

CodeSize represents the available sizes for the Code component 

const (
	CodeSizeDefault CodeSize = ""     // ~20 lines (default)
	CodeSizeSm      CodeSize = "sm"   // ~10 lines (for short examples)
	CodeSizeLg      CodeSize = "lg"   // ~40 lines (for long examples)
	CodeSizeFull    CodeSize = "full" // Full height (no max-height)
)

type DateFormat 

type DateFormat string

DateFormat defines date formatting options 

const (
	DateFormatISO  DateFormat = "iso"  // ISO format (YYYY-MM-DD)
	DateFormatEU   DateFormat = "eu"   // European format (DD.MM.YYYY)
	DateFormatUK   DateFormat = "uk"   // UK format (DD/MM/YYYY)
	DateFormatUS   DateFormat = "us"   // US format (MM/DD/YYYY)
	DateFormatLONG DateFormat = "long" // Long format (Month DD, YYYY)
)

type DateLocale 

type DateLocale struct {
	MonthNames []string // Localized month names
	DayNames   []string // Localized day names
}

DateLocale configures locale-specific settings

type DatePickerConfig 

type DatePickerConfig struct {
	Format DateFormat // Date format style
	Locale DateLocale // Localization settings
}

DatePickerConfig combines format and locale settings

func NewDatePickerConfig 

func NewDatePickerConfig(format DateFormat, locale DateLocale) DatePickerConfig

NewDatePickerConfig creates a new configuration with specified format and locale

type DatePickerProps 

type DatePickerProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Value       time.Time        // Selected date
	Config      DatePickerConfig // Format and locale config
	Placeholder string           // Helper text shown when empty
	Disabled    bool             // Prevents interaction
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

DatePickerProps configures the DatePicker component 

type DropdownMenuItem struct {
	Label      string             // Display text
	Value      string             // Optional value
	Href       string             // Optional link URL
	Target     string             // Optional link target
	IconLeft   templ.Component    // Optional icon on the left
	IconRight  templ.Component    // Optional icon on the right
	SubItems   []DropdownMenuItem // Nested submenu items
	Disabled   bool               // Disables the item
	Attributes templ.Attributes   // Additional HTML attributesß
}
type DropdownMenuProps struct {
	Items    []DropdownMenuItem // Menu items
	Trigger  templ.Component    // Custom trigger element
	Class    string             // Additional CSS classes
	Position string             // Preferred placement
}

type FormDescriptionProps 

type FormDescriptionProps struct {
	Class string // Additional CSS classes
}

FormDescriptionProps represents helper text properties

type FormItemProps 

type FormItemProps struct {
	ID    string // Optional container ID
	Class string // Additional CSS classes
}

FormItemProps represents form item properties

type FormLabelProps 

type FormLabelProps struct {
	For           string // Target form element ID
	Text          string // Label text
	Class         string // Additional CSS classes
	DisabledClass string // Additional CSS classes when the form element is disabled
}

FormLabelProps represents form label properties

type FormMessageProps 

type FormMessageProps struct {
	Type    string // error, success, warning, info
	Message string // Message text
	Class   string // Additional CSS classes
}

FormMessageProps represents feedback message properties

type InputOTPProps 

type InputOTPProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Value       string           // Current OTP value
	Length      int              // Number of digits in the OTP (default: 6)
	Type        string           // Input type (default: "text", can also be "number", "password", etc.)
	Placeholder string           // Character to show in empty fields (default: "•")
	Disabled    bool             // Prevents interaction
	Required    bool             // Required form field
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

InputOTPProps configures the OTP input component

type InputProps 

type InputProps struct {
	Type        InputType        // Input field type
	Placeholder string           // Helper text shown when empty
	Value       string           // Current input value
	Name        string           // Form field name
	ID          string           // DOM identifier
	Disabled    bool             // Prevents interaction
	Readonly    bool             // Allows selection only
	Required    bool             // Required
	FileAccept  string           // Allowed file types
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type InputType 

type InputType string
const (
	InputTypeText     InputType = "text"
	InputTypePassword InputType = "password"
	InputTypeEmail    InputType = "email"
	InputTypeNumber   InputType = "number"
	InputTypeTel      InputType = "tel"
	InputTypeURL      InputType = "url"
	InputTypeSearch   InputType = "search"
	InputTypeDate     InputType = "date"
	InputTypeTime     InputType = "time"
	InputTypeFile     InputType = "file"
)

type LabelProps 

type LabelProps struct {
	ID            string // Optional label ID
	For           string // Target input ID
	Text          string // Label text
	Error         string // Error message
	Class         string // Additional CSS classes
	DisabledClass string // Additional CSS classes when the input is disabled
}

type ModalProps 

type ModalProps struct {
	ID    string // Unique identifier for control
	Class string // Additional CSS classes
}

type PaginationProps 

type PaginationProps struct {
	CurrentPage  int              // Current active page (1-based index)
	TotalPages   int              // Total number of pages
	PageSize     int              // Number of items per page
	TotalItems   int              // Total number of items (alternative to TotalPages)
	MaxVisible   int              // Maximum number of page buttons to show
	Type         PaginationType   // Visual style variation
	ShowNumbers  bool             // Whether to show page numbers
	ShowControls bool             // Whether to show next/previous buttons
	UrlPattern   string           // URL pattern for links, use {page} placeholder, e.g. "/products?page={page}"
	HxGet        bool             // Whether to use hx-get instead of href for HTMX integration
	HxTarget     string           // Target element for HTMX updates
	HxSwap       string           // Swap method for HTMX updates
	Class        string           // Additional CSS classes
	Attributes   templ.Attributes // Additional HTML attributes
}

PaginationProps configures the Pagination component

type PaginationType 

type PaginationType string

PaginationType defines the visual style of pagination 

const (
	// PaginationTypeDefault shows numbered pages with first/last and next/previous controls
	PaginationTypeDefault PaginationType = "default"

	// PaginationTypeSimple shows only next/previous controls
	PaginationTypeSimple PaginationType = "simple"

	// PaginationTypeMinimal shows compact numbered pages with next/previous
	PaginationTypeMinimal PaginationType = "minimal"

	// PaginationTypeOutline uses outlined styling
	PaginationTypeOutline PaginationType = "outline"
)

type ProgressProps 

type ProgressProps struct {
	Value      int              // Current progress value (0-100)
	Max        int              // Maximum value (default: 100)
	Label      string           // Optional text label
	ShowValue  bool             // Whether to show percentage
	Size       ProgressSize     // Size variant (sm, md, lg)
	Variant    ProgressVariant  // Color variant
	Class      string           // Additional CSS classes
	BarClass   string           // Additional CSS classes for the bar itself
	HxGet      string           // HTMX endpoint for updates
	HxTrigger  string           // HTMX trigger for updates
	HxTarget   string           // HTMX target for updates
	HxSwap     string           // HTMX swap method
	Attributes templ.Attributes // Additional HTML attributes
}

ProgressProps configures the Progress component

type ProgressSize 

type ProgressSize string

ProgressSize defines available sizes for the Progress component 

const (
	ProgressSizeDefault ProgressSize = ""   // Default size
	ProgressSizeSm      ProgressSize = "sm" // Small progress bar
	ProgressSizeLg      ProgressSize = "lg" // Large progress bar
)

type ProgressVariant 

type ProgressVariant string

ProgressVariant defines color variants 

const (
	ProgressVariantDefault ProgressVariant = "default" // Default styling
	ProgressVariantSuccess ProgressVariant = "success" // Success state
	ProgressVariantDanger  ProgressVariant = "danger"  // Error/danger state
	ProgressVariantWarning ProgressVariant = "warning" // Warning state
)

type RadioCardProps 

type RadioCardProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Value       string           // Radio value
	Checked     bool             // Selected state
	Disabled    bool             // Prevents interaction
	Required    bool             // Required
	Title       string           // Card title
	Description string           // Card description
	Icon        templ.Component  // Optional icon
	Footer      templ.Component  // Optional footer content
	Class       string           // Additional CSS classes for the card
	Attributes  templ.Attributes // Additional HTML attributes
}

RadioCardProps configures the RadioCard component

type RadioProps 

type RadioProps struct {
	Value      string           // Radio button value
	Name       string           // Form field name
	ID         string           // DOM identifier
	Disabled   bool             // Prevents interaction
	Required   bool             // Required
	Checked    bool             // Selected state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type RatingProps 

type RatingProps struct {
	Value       float64          // Current rating value
	MaxValue    int              // Maximum rating value (default: 5)
	ReadOnly    bool             // Whether the rating is interactive or display-only
	Style       RatingStyle      // Visual style for the rating
	Size        RatingSize       // Size of the rating elements
	Precision   float64          // Step precision for fractional ratings (0.5, 0.1, etc.)
	Name        string           // Form field name (when used in forms)
	ShowValue   bool             // Whether to display the numeric value
	OnlyInteger bool             // Force ratings to integer values
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

RatingProps configures the Rating component

type RatingSize 

type RatingSize string

RatingSize defines available sizes for the Rating component

type RatingStyle 

type RatingStyle string

RatingStyle defines the visual style for the Rating component 

const (
	RatingStyleStar    RatingStyle = "star"    // Star icons for ratings
	RatingStyleHeart   RatingStyle = "heart"   // Heart icons for ratings
	RatingStyleEmoji   RatingStyle = "emoji"   // Emoji faces for ratings
	RatingStyleNumeric RatingStyle = "numeric" // Numeric display (with optional icon)
)

type SelectOption 

type SelectOption struct {
	Label      string           // Display text
	Value      string           // Form value
	Selected   bool             // Default selection
	Attributes templ.Attributes // Additional HTML attributes
}

type SelectProps 

type SelectProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Placeholder string           // Helper text shown when empty
	Options     []SelectOption   // Available choices
	Disabled    bool             // Prevents interaction
	Required    bool             // Required
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type SeparatorDecoration 

type SeparatorDecoration string

SeparatorDecoration defines the decoration style of the separator 

const (
	// SeparatorDecorationNone defines no decoration style
	SeparatorDecorationNone SeparatorDecoration = "none"
	// SeparatorDecorationDashed defines a dashed decoration style
	SeparatorDecorationDashed SeparatorDecoration = "dashed"
	// SeparatorDecorationDotted defines a dotted decoration style
	SeparatorDecorationDotted SeparatorDecoration = "dotted"
)

type SeparatorOrientation 

type SeparatorOrientation string

SeparatorOrientation defines the orientation of the separator 

const (
	// SeparatorOrientationHorizontal defines a horizontal separator
	SeparatorOrientationHorizontal SeparatorOrientation = "horizontal"
	// SeparatorOrientationVertical defines a vertical separator
	SeparatorOrientationVertical SeparatorOrientation = "vertical"
)

type SeparatorProps 

type SeparatorProps struct {
	Orientation SeparatorOrientation // Direction of the separator (horizontal or vertical)
	Decoration  SeparatorDecoration  // Decoration style (none, dashed, dotted)
	Label       string               // Optional label text to display in the middle
	Class       string               // Additional CSS classes
	Attributes  templ.Attributes     // Additional HTML attributes
}

SeparatorProps configures the Separator component

type SheetProps 

type SheetProps struct {
	Title       string    // Header text
	Description string    // Subheading text
	Side        SheetSide // Slide-in direction
}

type SheetSide 

type SheetSide string
const (
	SheetSideTop    SheetSide = "top"
	SheetSideRight  SheetSide = "right"
	SheetSideBottom SheetSide = "bottom"
	SheetSideLeft   SheetSide = "left"
)

type SkeletonProps 

type SkeletonProps struct {
	Class      string           // Additional CSS classes to apply to the skeleton element
	Attributes templ.Attributes // Additional attributes to apply to the skeleton element
}

type SliderProps 

type SliderProps struct {
	ID          string           // Unique identifier for the slider
	Name        string           // Input name attribute
	Min         int              // Minimum value
	Max         int              // Maximum value
	Step        int              // Value increment
	Value       int              // Initial value
	Label       string           // Optional label text
	ShowValue   bool             // Show current value
	ValueFormat string           // Optional format suffix
	Disabled    bool             // Disables the slider
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type SpinnerProps 

type SpinnerProps struct {
	Size       SpinnerSize      // Controls the size of the spinner (sm, md, lg)
	Color      string           // Custom color - uses theme colors if empty
	Text       string           // Optional text to display below the spinner
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

SpinnerProps configures the Spinner component

type SpinnerSize 

type SpinnerSize string

SpinnerSize represents the available sizes for the Spinner component 

const (
	SpinnerSizeSm SpinnerSize = "sm" // Small (24px)
	SpinnerSizeMd SpinnerSize = "md" // Medium (32px) - default
	SpinnerSizeLg SpinnerSize = "lg" // Large (48px)
)

type Tab 

type Tab struct {
	ID      string
	Title   string
	Content templ.Component
}

type TabsProps 

type TabsProps struct {
	Tabs                  []Tab
	TabsContainerClass    string
	ContentContainerClass string
}

type TextareaProps 

type TextareaProps struct {
	ID          string           // DOM identifier
	Name        string           // Form field name
	Value       string           // Initial content
	Placeholder string           // Helper text shown when empty
	Rows        int              // Visible lines of text
	Disabled    bool             // Prevents interaction
	Required    bool             // Required
	AutoResize  bool             // Enables dynamic resizing
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type TimePickerProps 

type TimePickerProps struct {
	ID          string           // Unique identifier
	Name        string           // Form input name
	Value       time.Time        // Initial time value
	Use12Hours  bool             // Enable 12-hour format with AM/PM
	AMLabel     string           // AM label for 12-hour format
	PMLabel     string           // PM label for 12-hour format
	Placeholder string           // Input placeholder text
	Required    bool             // Required form field
	Disabled    bool             // Disable interactivity
	HasError    bool             // Error state styling
	Class       string           // Additional CSS classes
	Attributes  templ.Attributes // Additional HTML attributes
}

type ToastProps 

type ToastProps struct {
	Message     string // Message to display
	Type        string // Type of the toast
	Position    string // Position of the toast
	Duration    int    // Duration in milliseconds
	Dismissible bool   // Show dismiss button
	Size        string // Size of the toast
	Icon        bool   // Show icon
}

type ToggleProps 

type ToggleProps struct {
	ID         string           // DOM identifier
	Name       string           // Form field name
	Disabled   bool             // Prevents interaction
	Checked    bool             // Toggled state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

type TooltipProps 

type TooltipProps struct {
	Trigger    templ.Component  // The element that triggers the tooltip
	Content    templ.Component  // The tooltip content
	Side       TooltipSide      // Tooltip position relative to trigger
	ShowArrow  bool             // Whether to show the arrow pointer
	Variant    TooltipVariant   // Visual style variant
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

TooltipProps configures the Tooltip component

type TooltipSide 

type TooltipSide string

TooltipSide definiert die Position des Tooltips relativ zum Trigger 

const (
	TooltipTop    TooltipSide = "top"
	TooltipRight  TooltipSide = "right"
	TooltipBottom TooltipSide = "bottom"
	TooltipLeft   TooltipSide = "left"
)

type TooltipVariant 

type TooltipVariant string
const (
	TooltipDefault     TooltipVariant = "default"
	TooltipSecondary   TooltipVariant = "secondary"
	TooltipDestructive TooltipVariant = "destructive"
)

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.