Shapes

Shape rounds the checkbox frame: square, rounded, or circular.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label:           "Accept the terms",
	TwoWayStatePath: "hasAcceptedTerms",

	// OptionalFields
	Shape: uiForm.CheckboxInputShapeRounded,
})

Sizes

Size scales the checkbox and its label: xs, sm, md, lg, or xl.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label:           "Accept the terms",
	TwoWayStatePath: "hasAcceptedTerms",

	// OptionalFields
	Size: uiForm.CheckboxInputSizeMd,
})

Label Position

LabelPosition places the label on the left or the right of the checkbox.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label:           "Accept the terms",
	TwoWayStatePath: "hasAcceptedTerms",

	// OptionalFields
	LabelPosition: uiForm.CheckboxInputLabelPositionLeft,
})

States

IsChecked starts the box checked, IsDisabled blocks edits, and IsRequired marks the field as required. IsDisabledOneWayStatePath blocks edits from Alpine state, and TextCase transforms the label.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label: "Accept the terms",

	// OptionalFields
	IsChecked:                 true,
	IsDisabled:                false,
	IsRequired:                false,
	IsDisabledOneWayStatePath: "!isCheckboxExampleEnabled",
	TextCase:                  uiToolset.TextCaseUpper,
})

Array and Indeterminate Binding

Value binds one array item to each checkbox. IndeterminateOneWayStatePath, IsCheckedOneWayStatePath, and OnChangeFunc drive a select-all parent. InputName includes the bound state in form submission.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label:                        "Select all",
	InputName:                    "selectedFruits",
	IndeterminateOneWayStatePath: "selectedFruits.length > 0 && selectedFruits.length < fruitOptions.length",
	IsCheckedOneWayStatePath:     "selectedFruits.length === fruitOptions.length",
	OnChangeFunc:                 "selectedFruits = selectedFruits.length === fruitOptions.length ? [] : [...fruitOptions]",
})

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label:           "Apple",
	InputName:       "selectedFruits",
	TwoWayStatePath: "selectedFruits",
	Value:           "apple",
})

Values:

Error States

IsInvalid shows the error style and ErrorMessage explains it. ErrorColor paints the error style, IsInvalidOneWayStatePath drives the error from Alpine state, and ErrorMessageOneWayStatePath prints the message from it.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label: "Accept the terms",

	// OptionalFields
	InputId:                     "checkbox-demo-terms",
	IsInvalid:                   true,
	ErrorMessage:                "You must accept the terms to continue.",
	ErrorColor:                  "orange-500",
	IsInvalidOneWayStatePath:    "!hasAcceptedTerms",
	ErrorMessageOneWayStatePath: "errorMessage",
})

Checked Colors

CheckedColor paints the filled box and UncheckedColor paints the empty box. FocusRingColor colors the focus ring, and TextColor colors the label.

@uiForm.CheckboxInput(uiForm.CheckboxInputSettings{
	Label: "Primary",

	// OptionalFields
	IsChecked:      true,
	CheckedColor:   "primary-500",
	UncheckedColor: "neutral-500",
	FocusRingColor: "primary-500",
	TextColor:      "neutral-50",
})

Sizes

Each radio carries its own Size, so the group can scale per option. TextCase transforms the legend and the labels, and InputName includes the selected value in form submission.

@uiForm.InlineRadioGroup(uiForm.InlineRadioGroupSettings{
	Label: "Select an option",
	InputSettings: []uiForm.RadioInputSettings{
		{
			Label:           "Option 1",
			StateValue:      "option1",
			TwoWayStatePath: "groupSizeSelection",
			InputId:         "groupOption1",
			InputName:       "groupSizes",
			Size:            uiForm.RadioInputSizeSm,
			TextCase:        uiToolset.TextCaseUpper,
		},
	},

	// OptionalFields
	TwoWayStatePath: "groupSizeSelection",
	InputName:       "groupSizeSelection",
	TextCase:        uiToolset.TextCaseUpper,
})

Value & Read-Only

Value seeds the field content. IsReadOnly shows the value without accepting edits. IsRequired marks the field as required.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	Value:      "Lorem ipsum dolor sit amet.",
	IsReadOnly: true,
	IsRequired: true,
})

Number Constraints

InputTypeNumber with InputNumberMin, InputNumberMax, and InputNumberStep bounds the accepted value.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeNumber,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	TwoWayStatePath: "name",
	InputNumberMin:  "0",
	InputNumberMax:  "100",
	InputNumberStep: ".1",
})

Affixes

AffixLeftValue and AffixRightValue render fixed text on either side of the input. AffixLeftStatePath and AffixRightStatePath read the affix text from Alpine state.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	TwoWayStatePath:     "name",
	AffixLeftValue:      "goinfinite.net/",
	AffixLeftStatePath:  "leftAffix",
	AffixRightValue:     ".jpg",
	AffixRightStatePath: "rightAffix",
})

Icon Left

IconLeft renders a Phosphor icon inside the field before the input.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	TwoWayStatePath: "name",
	IconLeft:        "ph-magnifying-glass",
})

Affix Width

AffixLeftWidthPercent and AffixRightWidthPercent fix an affix to a percentage of the field width. Without them, an affix caps at half the width.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "domain",
	Label:     "Domain",

	// OptionalFields
	TwoWayStatePath:       "domain",
	AffixLeftValue:        "goinfinite.net/",
	AffixLeftWidthPercent: 40,
})

Sizes

Size scales the input, its affixes, and the floating label. It accepts xs, sm, md (the default), lg, or xl.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	Size: uiForm.InputFieldSizeLg,
})

Label Case

TextCase transforms the floating label and the placeholder. It accepts uiToolset.TextCaseNone (the default, as typed), TextCaseLower, TextCaseUpper, or TextCaseCapitalize.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Network Interface",

	// OptionalFields
	TextCase: uiToolset.TextCaseUpper,
})

Hints

HintValue explains the field. HintDisplay shows it as a description below the field or as a tooltip. HintStatePath reads the hint text from Alpine state. The HintDisplayTooltip fields shape the tooltip surface.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	TwoWayStatePath:                   "name",
	HintValue:                         "This is a helpful hint.",
	HintStatePath:                     "hintText",
	HintDisplay:                       uiForm.InputHintDisplayTooltip,
	HintDisplayTooltipBackgroundColor: "violet-950/95",
	HintDisplayTooltipMinWidthClass:   "min-w-40",
	HintDisplayTooltipMaxWidthClass:   "max-w-64",
	HintDisplayTooltipMinHeightClass:  "min-h-10",
	HintDisplayTooltipMaxHeightClass:  "max-h-24",
})

Hint Icon Styles

HintIconStyle renders the hint trigger as an icon or as a boxed tooltip.

@uiForm.InputField(uiForm.InputFieldSettings{
	InputType: uiForm.InputTypeText,
	InputName: "name",
	Label:     "Name",

	// OptionalFields
	TwoWayStatePath: "name",
	HintValue:       "This is a helpful hint.",
	HintDisplay:     uiForm.InputHintDisplayTooltip,
	HintIconStyle:   uiForm.InputHintIconStyleBoxed,
})

LabelValueOptions

LabelValueOptions send a stored Value while showing a human Label. The bound state holds the selected Values.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countries",
	Label:     "Countries",

	// OptionalFields
	LabelValueOptions: []uiForm.SelectLabelValueOption{
		{Label: "Argentina", Value: "AR"},
		{Label: "Brazil", Value: "BR"},
		{Label: "Chile", Value: "CL"},
	},
	TwoWayStatePath: "countries",
})

Alpine.js Parent State (x-data)

<div x-data="{countries: ['BR']}"></div>

HTML Option Labels

LabelHtml replaces the plain option label with custom markup in the dropdown.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countriesWithHtml",
	Label:     "Countries",

	// OptionalFields
	LabelValueOptions: []uiForm.SelectLabelValueOption{
		{Label: "Argentina", LabelHtml: MultiSelectInputDemoOption1(), Value: "AR"},
		{Label: "Brazil", LabelHtml: MultiSelectInputDemoOption2(), Value: "BR"},
		{Label: "Chile", LabelHtml: MultiSelectInputDemoOption3(), Value: "CL"},
	},
	TwoWayStatePath: "countries",
})

Alpine.js Parent State (x-data)

<div x-data="{countries: ['BR']}"></div>

Click the dropdown to see the HTML labels.

Hints

HintValue explains the field. HintDisplay shows it as a description below the field or as a tooltip. HintStatePath reads the hint text from Alpine state. The HintDisplayTooltip fields shape the tooltip surface.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countriesHint",
	Label:     "Countries",

	// OptionalFields
	FlatOptions:                       []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath:                   "countries",
	HintValue:                         "This is a helpful hint.",
	HintStatePath:                     "hintText",
	HintDisplay:                       uiForm.InputHintDisplayTooltip,
	HintDisplayTooltipBackgroundColor: "violet-950/95",
	HintDisplayTooltipMinWidthClass:   "min-w-40",
	HintDisplayTooltipMaxWidthClass:   "max-w-64",
	HintDisplayTooltipMinHeightClass:  "min-h-10",
	HintDisplayTooltipMaxHeightClass:  "max-h-24",
})

Hint Icon Styles

HintIconStyle renders the hint trigger as an icon or as a boxed tooltip.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countriesHintBoxed",
	Label:     "Countries",

	// OptionalFields
	FlatOptions:     []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath: "countries",
	HintValue:        "This is a helpful hint.",
	HintDisplay:      uiForm.InputHintDisplayTooltip,
	HintIconStyle:    uiForm.InputHintIconStyleBoxed,
})

Required

IsRequired marks the field as required.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countriesRequired",
	Label:     "Countries",

	// OptionalFields
	FlatOptions:     []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath: "countries",
	IsRequired:      true,
})

OnChangeFunc

OnChangeFunc runs when a selection changes and when the field is cleared.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countriesChange",
	Label:     "Countries",

	// OptionalFields
	FlatOptions:     []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath: "countries",
	OnChangeFunc:    "onCountryChange()",
})

Alpine.js Parent State (x-data)

<div x-data="{countries: ['BR'], changeCount: 0, onCountryChange() { this.changeCount++ }}"></div>

Dropdown Background

DropdownBackgroundColor sets the dropdown surface color. It accepts a Tailwind token.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countriesDropdown",
	Label:     "Countries",

	// OptionalFields
	FlatOptions:             []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath:         "countries",
	DropdownBackgroundColor: "emerald-900",
})

Open the dropdown to see the background color.

Text Case

TextCase transforms the field label. It accepts uiToolset.TextCaseNone (the default, as typed), TextCaseLower, TextCaseUpper, or TextCaseCapitalize.

@uiForm.MultiSelectInput(uiForm.MultiSelectInputSettings{
	InputName: "countriesTextCase",
	Label:     "Countries",

	// OptionalFields
	FlatOptions:     []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath: "countries",
	TextCase:        uiToolset.TextCaseUpper,
})

Sizes

Size scales the radio and its label: xs, sm, md, lg, or xl. TextCase transforms the label, and InputName names the radio in the form.

@uiForm.RadioInput(uiForm.RadioInputSettings{
	Label:           "Option 1",
	StateValue:      "option1",
	TwoWayStatePath: "selectedOption",

	// OptionalFields
	InputName: "options",
	Size:      uiForm.RadioInputSizeMd,
	TextCase:  uiToolset.TextCaseUpper,
})

LabelValueOptions

LabelValueOptions send a stored Value while showing a human Label. The bound state holds the Value.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryCode",
	Label:     "Country",

	// OptionalFields
	LabelValueOptions: []uiForm.SelectLabelValueOption{
		{Label: "Argentina", Value: "AR"},
		{Label: "Brazil", Value: "BR"},
		{Label: "Chile", Value: "CL"},
	},
	TwoWayStatePath:          "country",
	ShouldIncludeBlankOption: true,
})

Alpine.js Parent State (x-data)

<div x-data="{country: 'BR'}"></div>

HTML Option Labels

LabelHtml replaces the plain option label with custom markup in the dropdown.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryWithHtml",
	Label:     "Country",

	// OptionalFields
	LabelValueOptions: []uiForm.SelectLabelValueOption{
		{Label: "Argentina", LabelHtml: SelectInputDemoOption1(), Value: "AR"},
		{Label: "Brazil", LabelHtml: SelectInputDemoOption2(), Value: "BR"},
		{Label: "Chile", LabelHtml: SelectInputDemoOption3(), Value: "CL"},
	},
	TwoWayStatePath:          "country",
	ShouldIncludeBlankOption: true,
})

Alpine.js Parent State (x-data)

<div x-data="{country: 'BR'}"></div>

Click the dropdown to see the HTML labels.

Hints

HintValue explains the field. HintDisplay shows it as a description below the field or as a tooltip. HintStatePath reads the hint text from Alpine state. The HintDisplayTooltip fields shape the tooltip surface.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryHint",
	Label:     "Country",

	// OptionalFields
	FlatOptions:                       []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath:                   "country",
	ShouldIncludeBlankOption:          true,
	HintValue:                         "This is a helpful hint.",
	HintStatePath:                     "hintText",
	HintDisplay:                       uiForm.InputHintDisplayTooltip,
	HintDisplayTooltipBackgroundColor: "violet-950/95",
	HintDisplayTooltipMinWidthClass:   "min-w-40",
	HintDisplayTooltipMaxWidthClass:   "max-w-64",
	HintDisplayTooltipMinHeightClass:  "min-h-10",
	HintDisplayTooltipMaxHeightClass:  "max-h-24",
})

Hint Icon Styles

HintIconStyle renders the hint trigger as an icon or as a boxed tooltip.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryHintBoxed",
	Label:     "Country",

	// OptionalFields
	FlatOptions:     []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath: "country",
	HintValue:        "This is a helpful hint.",
	HintDisplay:      uiForm.InputHintDisplayTooltip,
	HintIconStyle:    uiForm.InputHintIconStyleBoxed,
})

OnChangeFunc

OnChangeFunc runs when the selection changes and when the field is cleared.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryChange",
	Label:     "Country",

	// OptionalFields
	FlatOptions:              []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath:          "country",
	ShouldIncludeBlankOption: true,
	OnChangeFunc:             "onCountryChange()",
})

Alpine.js Parent State (x-data)

<div x-data="{country: 'Brazil', changeCount: 0, onCountryChange() { this.changeCount++ }}"></div>

Sizes

Size scales the select trigger and its label: xs, sm, md (the default), lg, or xl.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countrySize",
	Label:     "Country",

	// OptionalFields
	FlatOptions: []string{"Argentina", "Brazil", "Chile"},
	Size:        uiForm.SelectInputSizeLg,
})

Text Case

TextCase transforms the field label. It accepts uiToolset.TextCaseNone (the default, as typed), TextCaseLower, TextCaseUpper, or TextCaseCapitalize.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryCase",
	Label:     "Country",

	// OptionalFields
	FlatOptions: []string{"Argentina", "Brazil", "Chile"},
	TextCase:    uiToolset.TextCaseUpper,
})

Dropdown Background

DropdownBackgroundColor sets the dropdown surface color. It accepts a Tailwind token.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryDropdown",
	Label:     "Country",

	// OptionalFields
	FlatOptions:             []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath:         "countryDropdown",
	DropdownBackgroundColor: "emerald-900",
})

Required

IsRequired marks the field as required.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryRequired",
	Label:     "Country",

	// OptionalFields
	FlatOptions:              []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath:          "country",
	ShouldIncludeBlankOption: true,
	IsRequired:               true,
})

Disabled Binding

IsDisabledOneWayStatePath disables the select from Alpine state.

@uiForm.SelectInput(uiForm.SelectInputSettings{
	InputName: "countryDisabled",
	Label:     "Country",

	// OptionalFields
	FlatOptions:               []string{"Argentina", "Brazil", "Chile"},
	TwoWayStatePath:           "country",
	ShouldIncludeBlankOption:  true,
	IsDisabledOneWayStatePath: "isDisabled",
})

Alpine.js Parent State (x-data)

<div x-data="{country: 'Brazil', isDisabled: true}"></div>

Value & Read-Only

Value seeds the field content. IsReadOnly shows the value without accepting edits.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "description",
	Label:     "Description",

	// OptionalFields
	Value:      "Lorem ipsum dolor sit amet.",
	IsReadOnly: true,
})

Code Mode

IsCode switches the field to a monospace editor styled for source code.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "snippet",
	Label:     "Snippet",

	// OptionalFields
	TwoWayStatePath: "snippet",
	IsCode:          true,
})

Hints

HintValue explains the field. HintDisplay shows it as a description below the field or as a tooltip. The HintDisplayTooltip fields shape the tooltip surface.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "description",
	Label:     "Description",

	// OptionalFields
	TwoWayStatePath:                   "description",
	HintValue:                         "This is a helpful hint.",
	HintDisplay:                       uiForm.InputHintDisplayTooltip,
	HintDisplayTooltipBackgroundColor: "violet-950/95",
	HintDisplayTooltipMinWidthClass:   "min-w-40",
	HintDisplayTooltipMaxWidthClass:   "max-w-64",
	HintDisplayTooltipMinHeightClass:  "min-h-10",
	HintDisplayTooltipMaxHeightClass:  "max-h-24",
})

Hint State Path

HintStatePath reads the hint text from Alpine state, so the hint updates as the state changes.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "description",
	Label:     "Description",

	// OptionalFields
	TwoWayStatePath: "description",
	HintStatePath:   "hintText",
	HintDisplay:     uiForm.InputHintDisplayTooltip,
})

Sizes

Size scales the textarea height and font: xs, sm, md (the default), lg, or xl.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "description",
	Label:     "Description",

	// OptionalFields
	TwoWayStatePath: "description",
	Size:            uiForm.TextAreaSizeLg,
})

Text Case

TextCase transforms the label and the placeholder. It accepts uiToolset.TextCaseNone (the default, as typed), TextCaseLower, TextCaseUpper, or TextCaseCapitalize.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "description",
	Label:     "Description",

	// OptionalFields
	TwoWayStatePath: "description",
	TextCase:        uiToolset.TextCaseUpper,
})

Required

IsRequired marks the field as required.

@uiForm.TextArea(uiForm.TextAreaSettings{
	InputName: "description",
	Label:     "Description",

	// OptionalFields
	TwoWayStatePath: "description",
	IsRequired:      true,
})

Sizes

Size scales the track, thumb, and label: xs, sm, md, lg, or xl.

@uiForm.ToggleSwitch(uiForm.ToggleSwitchSettings{
	Label:           "Enable notifications",
	TwoWayStatePath: "isNotificationsEnabled",

	// OptionalFields
	Size: uiForm.ToggleSwitchSizeMd,
})

Label Position

LabelPosition places the label on the left or the right of the switch. TextCase transforms the label.

@uiForm.ToggleSwitch(uiForm.ToggleSwitchSettings{
	Label:           "Enable notifications",
	TwoWayStatePath: "isNotificationsEnabled",

	// OptionalFields
	LabelPosition: uiForm.ToggleSwitchLabelPositionLeft,
	TextCase:      uiToolset.TextCaseUpper,
})

Color Variants

Track, thumb, border, text, and focus colors accept Tailwind color tokens.

@uiForm.ToggleSwitch(uiForm.ToggleSwitchSettings{
	Label:                       "Emerald accent",
	TwoWayStatePath:             "emeraldEnabled",

	// OptionalFields
	TrackBackgroundColor:        "emerald-900/40",
	TrackCheckedBackgroundColor: "emerald-500",
	ThumbBackgroundColor:        "amber-300",
	ThumbBorderColor:            "amber-500",
	TextColor:                   "amber-100",
	FocusRingColor:              "emerald-500/50",
})

Required & Disabled

IsRequired marks the switch as required. IsDisabled blocks edits.

@uiForm.ToggleSwitch(uiForm.ToggleSwitchSettings{
	Label:           "Enable notifications",
	TwoWayStatePath: "isNotificationsEnabled",

	// OptionalFields
	IsRequired: true,
	IsDisabled: false,
})

Custom Values

CustomValue turns the switch into an array toggle: it adds the value when checked and removes it when unchecked. InputName includes the selection in form submission.

@uiForm.ToggleSwitch(uiForm.ToggleSwitchSettings{
	Label:           "Email notifications",
	TwoWayStatePath: "selectedChannels",
	InputName:       "channels",

	// OptionalFields
	CustomValue: "email",
})

Values:

Item Icons

Icon renders a Phosphor icon beside the item title.

@uiDisplay.Accordion(uiDisplay.AccordionSettings{
	Items: []uiDisplay.AccordionItemSettings{
		{Title: "Section 1", Content: AccordionDemoSection1(), Icon: "ph-info"},
		{Title: "Section 2", Content: AccordionDemoSection2(), Icon: "ph-warning"},
	},
})

Surface & Padding

Background, open background, content background, title color, border, and radius style the item surface. PaddingSize and ContentPaddingSize scale the paddings.

@uiDisplay.Accordion(uiDisplay.AccordionSettings{
	Items: []uiDisplay.AccordionItemSettings{
		{Title: "Section 1", Content: AccordionDemoSection1()},
	},

	// OptionalFields
	BackgroundColor:        "primary-900/40",
	OpenBackgroundColor:    "primary-800/60",
	ContentBackgroundColor: "primary-950",
	TitleColor:             "primary-100",
	BorderColor:            "primary-500/30",
	BorderRadius:           uiDisplay.AccordionBorderRadiusXl,
	PaddingSize:            uiDisplay.AccordionPaddingSizeLg,
	ContentPaddingSize:     uiDisplay.AccordionPaddingSizeXl,
})

Single Open

IsSingleOpen keeps one item open at a time. Opening a section closes the section that was open.

@uiDisplay.Accordion(uiDisplay.AccordionSettings{
	Items: []uiDisplay.AccordionItemSettings{
		{Title: "Section 1", Content: AccordionDemoSection1()},
		{Title: "Section 2", Content: AccordionDemoSection2()},
		{Title: "Section 3", Content: AccordionDemoSection3()},
	},

	// OptionalFields
	IsSingleOpen: true,
})

Text Case

TextCase transforms the item titles. It accepts uiToolset.TextCaseNone (the default, as typed), TextCaseLower, TextCaseUpper, or TextCaseCapitalize.

@uiDisplay.Accordion(uiDisplay.AccordionSettings{
	Items: []uiDisplay.AccordionItemSettings{
		{Title: "Section 1", Content: AccordionDemoSection1()},
		{Title: "Section 2", Content: AccordionDemoSection2()},
	},

	// OptionalFields
	TextCase: uiToolset.TextCaseUpper,
})

Sizes

Size scales the alert padding and type: xs, sm, md, lg, or xl. MaxWidth caps the width with a Tailwind size token.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title:       "Alert Title",
	Description: "This is an alert message.",
	Variation:   uiDisplay.AlertVariationInfo,
	Size:        uiDisplay.AlertSizeMd,
	MaxWidth:    "md",
})

Content Html Slot

ContentHtml replaces the plain description with a templ component of your own.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title: "Deploy finished",

	// OptionalFields
	ContentHtml: AlertDemoCustomContent(),
})

Icons

TitleLeftIcon replaces the variation icon on the left. TitleRightIcon adds an icon on the right. The TwoWayStatePath variants bind the icon classes to Alpine state.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title:          "Rocket deploy",
	Description:    "TitleLeftIcon and TitleRightIcon frame the content.",
	TitleLeftIcon:  "ph-rocket-launch",
	TitleRightIcon: "ph-arrow-right",
})

Close & Timeout

IsCloseable adds the dismiss button and OnCloseFunc runs when it is pressed. DisplayTimeoutSeconds auto-dismisses the alert and runs OnTimeoutFunc.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title:       "Alert Title",
	Description: "This is an alert message.",

	// OptionalFields
	IsCloseable:           true,
	OnCloseFunc:           "alertClosed = true",
	DisplayTimeoutSeconds: 8,
	OnTimeoutFunc:         "alertTimedOut = true",
})

Closed: · Timed out:

Custom Surface

Background, text, ring, radius, shadow, and close-icon colors accept Tailwind tokens. TextTitleColor and TextDescriptionColor style the title and description separately. Gradient backgrounds work too.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title:       "Alert Title",
	Description: "This is an alert message.",

	// OptionalFields
	BackgroundColor:          "cyan-500/20",
	TextColor:                "cyan-100",
	TextTitleColor:           "cyan-50",
	TextDescriptionColor:     "cyan-200",
	RingThickness:            uiDisplay.AlertRingThicknessLg,
	RingColor:                "cyan-400",
	ShadowSize:               uiDisplay.AlertShadowSizeXl,
	BorderRadius:             uiDisplay.AlertBorderRadiusLg,
	CloseIconBackgroundColor: "cyan-500/30",
	CloseIconTextColor:       "white",
})

State-Bound Content

TitleOneWayStatePath, DescriptionOneWayStatePath, and IsCloseableOneWayStatePath drive the alert from Alpine state.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title:                      "Dynamic Content Alert",
	TitleOneWayStatePath:       "alertTitle",
	DescriptionOneWayStatePath: "alertMessage",
	Variation:                  uiDisplay.AlertVariationInfo,

	// OptionalFields
	IsCloseableOneWayStatePath: "isAlertCloseable",
})

Custom Text

TextMessage replaces the default loading label. TextColor and TextSize style it. Set colors as rgb(a), hex, or hsl(a) values: they are used in an inline style.

@uiDisplay.CloakLoading(uiDisplay.CloakLoadingSettings{
	// OptionalFields
	BackgroundColor: "rgb(30, 58, 138)",
	TextMessage:     "Please wait...",
	TextColor:       "rgb(255, 255, 255)",
	TextSize:        uiDisplay.CloakLoadingTextSizeLg,
})

Icon & Animation

Icon replaces the spinner. IconSize scales it. IconAnimationName spins or pulses it over IconAnimationDurationSeconds.

@uiDisplay.CloakLoading(uiDisplay.CloakLoadingSettings{
	// OptionalFields
	Icon:                         "ph-hourglass",
	IconSize:                     uiDisplay.CloakLoadingIconSizeMd,
	IconColor:                    "rgb(110, 231, 183)",
	IconAnimationName:            uiDisplay.CloakLoadingAnimationNamePulse,
	IconAnimationDurationSeconds: "2",
})

Hide Delay

HideDelaySeconds keeps the cloak on screen for a moment after the libraries load, so the hand-off does not flash. It defaults to 1 second.

@uiDisplay.CloakLoading(uiDisplay.CloakLoadingSettings{
	// OptionalFields
	HideDelaySeconds: "3",
})

Type-to-Confirm

IsTypeToConfirmEnabled gates the confirm button behind a typed match. The first dialog matches the TypeToConfirmExpectedValue phrase; the second matches the bound TargetNameStatePath and TargetIdStatePath. TypeToConfirmValueTwoWayStatePath binds the typed value to your own Alpine state. The delete and critical presets enable this by default.

@uiDisplay.ConfirmDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isTypeToConfirmVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	IsTypeToConfirmEnabled:            true,
	TypeToConfirmExpectedValue:        "proceed",
	TypeToConfirmValueTwoWayStatePath: "typedConfirmationValue",

	// Or match the bound target name and id
	TargetNameStatePath: "demoTargetName",
	TargetIdStatePath:   "demoTargetId",
})

Confirmed:

Uncloseable

IsUncloseable hides the close button and ignores backdrop clicks. CancelFunc still closes the dialog from its cancel button.

@uiDisplay.ConfirmDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isUncloseableVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	IsUncloseable: true,
	CancelFunc:    "isUncloseableVisible = false",
})

Button Labels & Icons

ConfirmButtonLabel, ConfirmButtonIcon, and CancelButtonLabel override the preset copy. CancelFunc runs when the cancel button is pressed.

@uiDisplay.ConfirmDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isLabelsVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	HeaderTitle:        "Purge Records",
	ConfirmButtonLabel: "Purge Everything",
	ConfirmButtonIcon:  "ph-fire",
	CancelButtonLabel:  "Keep It",
})

Confirmed:

Custom Message & Header

Message sets the note under the question. MessageContent replaces the whole question block, so it wins when both are set. HeaderContent replaces the icon and title block. Size sets the dialog width.

@uiDisplay.ConfirmDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isSlotsVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	Message:        "This action cannot be undone.",
	MessageContent: ConfirmationDialogDemoCustomMessage(),
	HeaderContent:  ConfirmationDialogDemoCustomHeader(),
	Size:           uiDisplay.ConfirmationDialogSizeLg,
})

Confirmed:

Icon On Left

HeaderIconPosition defaults to Top, which centers the icon above the title. HeaderIconPositionLeft places it beside the title. HeaderIcon swaps the preset icon. HeaderIconColor, HeaderIconBackgroundColor, HeaderIconBorderRadius, and HeaderIconPaddingSize shape it. HeaderSize scales the title and icon.

@uiDisplay.WarningDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isIconPositionVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	HeaderIcon:                "ph-rocket-launch",
	HeaderIconPosition:        uiDisplay.HeaderIconPositionLeft,
	HeaderIconColor:           "sky-300",
	HeaderIconBackgroundColor: "sky-500/20",
	HeaderIconBorderRadius:    uiDisplay.HeaderIconBorderRadiusSm,
	HeaderIconPaddingSize:     uiDisplay.HeaderIconPaddingSizeSm,
	HeaderSize:                uiDisplay.HeaderSizeMd,
})

Header Text Styling

HeaderSubHeading adds a line under the title. HeaderTitleColor, HeaderSubHeadingColor, and TextColor color the title, the sub-heading, and the block text. HeaderTitleOneWayStatePath and HeaderSubHeadingOneWayStatePath bind both lines to Alpine state. TextCase transforms the text.

@uiDisplay.ConfirmDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isHeaderTextVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	HeaderTitle:                     "Reindex Storage",
	HeaderTitleColor:                "amber-300",
	HeaderTitleOneWayStatePath:      "headerTextTitle",
	HeaderSubHeading:                "Runs in the background",
	HeaderSubHeadingColor:           "emerald-300",
	HeaderSubHeadingOneWayStatePath: "headerTextSubHeading",
	TextCase:                        uiToolset.TextCaseUpper,
	TextColor:                       "neutral-200",
})

Sizing Bounds

HeightPercent fixes the dialog height instead of matching the content. MinWidthPercent and MaxWidthPercent clamp the width. MaxHeightPercent caps the height.

@uiDisplay.ConfirmDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isSizingVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	HeightPercent:    50,
	MinWidthPercent:  60,
	MaxWidthPercent:  70,
	MaxHeightPercent: 40,
})

Header Actions

ActionsContent renders custom controls at the end of the dialog header. The close button stays at the top right.

@uiDisplay.ConfirmDialog(uiDisplay.ConfirmationDialogSettings{
	IsVisibleTwoWayStatePath: "isActionsVisible",
	OnConfirmFunc:            "runAction()",

	// OptionalFields
	ActionsContent: ConfirmationDialogDemoHeaderActions(),
})

Icon & Animation

Icon replaces the spinner. IconSize scales it. AnimationName spins or pulses it over AnimationDurationSeconds.

@uiDisplay.LoadingOverlay(uiDisplay.LoadingOverlaySettings{
	IsLoadingOneWayStatePath: "isLoading",

	// OptionalFields
	Icon:                     "ph-compass-rose",
	IconSize:                 uiDisplay.LoadingOverlayIconSizeMd,
	AnimationName:            uiDisplay.LoadingOverlayAnimationNameSpin,
	AnimationDurationSeconds: "2",
})

Background Color

BackgroundColor paints the veil over the content.

@uiDisplay.LoadingOverlay(uiDisplay.LoadingOverlaySettings{
	IsLoadingOneWayStatePath: "isLoading",

	// OptionalFields
	BackgroundColor: "neutral-900/80",
})

Uncloseable

IsUncloseable hides the close button and ignores backdrop clicks. Your content closes the modal through its own state path.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: UncloseableModalDemoContent(),
	Title:         "Uncloseable Modal",

	// OptionalFields
	IsUncloseable:            true,
	IsVisibleTwoWayStatePath: "isUncloseableModalVisible",
})

Unresizable & OnResize

IsUnresizable hides the resize buttons. OnResizeFunc runs every time the user resizes a closeable modal through those buttons.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: ModalDemoContent(),
	Title:         "Fixed Size Modal",

	// OptionalFields
	IsUnresizable: true,
	OnResizeFunc:  "resizeCount = resizeCount + 1",
})

OnResizeFunc calls:

Header & Footer Slots

HeaderContent replaces the title bar. FooterContent renders under the body for actions. Set Title or TitleOneWayStatePath as well to keep an accessible name when the header is custom.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: ModalDemoContent(),

	// OptionalFields
	HeaderContent:            ModalDemoHeader(),
	FooterContent:            ModalDemoFooter(),
	TitleOneWayStatePath:     "slotsModalTitle",
	IsVisibleTwoWayStatePath: "isSlotsModalVisible",
})

Custom Surface

Backdrop, background, ring, radius, shadow, and text colors accept Tailwind tokens.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: ModalDemoContent(),
	Title:         "Blue Backdrop Modal",

	// OptionalFields
	BackdropColor:            "blue-900/60",
	BackgroundColor:          "primary-900",
	TextColor:                "neutral-100",
	ShadowSize:               uiDisplay.ModalShadowSizeXl,
	RingColor:                "primary-500",
	RingThickness:            "md",
	BorderRadius:             "lg",
	IsVisibleTwoWayStatePath: "isBlueBackdropModalVisible",
})

Near-Full Size

ModalSizeXxl spans about 90% of the viewport in both directions. Tall content like a terminal session is its usual partner.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: TerminalModalDemoContent(),
	Title:         "WebTerminal Modal",

	// OptionalFields
	InitialSize:              uiDisplay.ModalSizeXxl,
	IsVisibleTwoWayStatePath: "isTerminalModalVisible",
})

Custom Dimensions

WidthPercent and HeightPercent replace the width and height of InitialSize; InitialSize keeps its padding and header scale. The Min and Max fields clamp each axis. Pinning both axes retires the resize controls. IsMiddleContentScrollDisabled pins the body for embedded apps like a terminal. ShouldHeightMatchContent sizes the height to the content.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: TerminalModalDemoContent(),
	Title:         "Pinned Dimensions Modal",

	// OptionalFields
	InitialSize:                   uiDisplay.ModalSizeMd,
	WidthPercent:                  70,
	HeightPercent:                 45,
	MinWidthPercent:               50,
	MaxWidthPercent:               90,
	MinHeightPercent:              30,
	MaxHeightPercent:              60,
	IsMiddleContentScrollDisabled: true,
	IsVisibleTwoWayStatePath:      "isPinnedDimensionsModalVisible",
})

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent:            ModalDemoContent(),
	Title:                    "Content Height Modal",

	// OptionalFields
	InitialSize:              uiDisplay.ModalSizeMd,
	ShouldHeightMatchContent: true,
	IsVisibleTwoWayStatePath: "isContentHeightModalVisible",
})

Size Slice

PossibleSizes is the ordered set of sizes and InitialSize is its first entry; entries below it are dropped. Enlarge steps up the set, reduce steps back down, and each control hides when it would do nothing.

@uiDisplay.Modal(uiDisplay.ModalSettings{
	MiddleContent: ModalDemoContent(),
	Title:         "Size Slice Modal",

	// OptionalFields
	InitialSize:              uiDisplay.ModalSizeMd,
	PossibleSizes:            []string{uiDisplay.ModalSizeMd, uiDisplay.ModalSizeLg, uiDisplay.ModalSizeXl},
	IsVisibleTwoWayStatePath: "isSizeSliceModalVisible",
})

Attachment Modes

inline keeps the sidebar in the page flow. fixed pins it to the viewport while the rest of the page scrolls. Set AttachmentMode directly, or use AttachmentModeTwoWayStatePath to switch at runtime.

@uiStructural.Sidebar(uiStructural.SidebarSettings{
	MiddleContent: SidebarDemoMiddle(),

	// OptionalFields
	HeaderContent:                 SidebarDemoHeader(),
	FooterContent:                 SidebarDemoFooter(),
	AttachmentMode:                uiStructural.SidebarAttachmentModeInline,
	AttachmentModeTwoWayStatePath: "attachmentMode",
})

Off-Canvas

IsOffCanvas overlays the sidebar on the content instead of pushing it. Pair it with IsVisibleTwoWayStatePath for a drawer.

@uiStructural.Sidebar(uiStructural.SidebarSettings{
	MiddleContent: SidebarDemoMiddle(),

	// OptionalFields
	HeaderContent:                 SidebarDemoHeader(),
	FooterContent:                 SidebarDemoFooter(),
	IsOffCanvas:                   true,
	IsOffCanvasTwoWayStatePath:    "isOffCanvas",
	IsVisibleTwoWayStatePath:      "isVisible",
})

Side

Side attaches the sidebar to the left or right edge. Set Side directly to pin it, or use SideTwoWayStatePath to switch at runtime.

@uiStructural.Sidebar(uiStructural.SidebarSettings{
	MiddleContent: SidebarDemoMiddle(),

	// OptionalFields
	HeaderContent:       SidebarDemoHeader(),
	FooterContent:       SidebarDemoFooter(),
	SideTwoWayStatePath: "side",
})

@uiStructural.Sidebar(uiStructural.SidebarSettings{
	MiddleContent: SidebarDemoMiddle(),

	// OptionalFields
	HeaderContent: SidebarDemoHeader(),
	FooterContent: SidebarDemoFooter(),
	Side:          uiStructural.SidebarSideRight,
})

Width & Background

Width accepts a Tailwind width class. BackgroundColor accepts a Tailwind background class, opacity included. The second preview sets IsCollapsed: true with a matching Width for a static collapsed sidebar.

@uiStructural.Sidebar(uiStructural.SidebarSettings{
	MiddleContent: SidebarDemoMiddle(),

	// OptionalFields
	HeaderContent:   SidebarDemoHeader(),
	FooterContent:   SidebarDemoFooter(),
	Width:           "w-46",
	BackgroundColor: "bg-primary-900/80",
})

@uiStructural.Sidebar(uiStructural.SidebarSettings{
	MiddleContent: SidebarDemoMiddle(),

	// OptionalFields
	HeaderContent: SidebarDemoHeader(),
	FooterContent: SidebarDemoFooter(),
	Width:         "w-16",
	IsCollapsed:   true,
})

Sizes

Size scales the outer and inner segments: tiny, xs, sm, md, lg, or xl.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:  "ph-info",
	OuterLeftLabel: "Info",
	InnerIcon:      "ph-warning",
	InnerLabel:     "Warning",

	// OptionalFields
	Size: uiDisplay.TagSizeSm,
})

Radii

OuterRadius rounds the outer segment and InnerRadius rounds the inner one: none, xs, sm, md, lg, xl, or full.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:  "ph-info",
	OuterLeftLabel: "Info",
	InnerIcon:      "ph-warning",
	InnerLabel:     "Warning",

	// OptionalFields
	OuterRadius: uiDisplay.TagRadiusMd,
	InnerRadius: uiDisplay.TagRadiusMd,
})

Outer Ring Colors

OuterRingColor outlines the outer segment. OuterRingThickness sets the outline width. Pair it with a transparent OuterBackgroundColor for an outlined tag.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:  "ph-info",
	OuterLeftLabel: "Info",

	// OptionalFields
	OuterRingColor:       "emerald-500",
	OuterRingThickness:   uiDisplay.TagRingThicknessLg,
	OuterBackgroundColor: "transparent",
	OuterTextColor:       "neutral-50",
})

Outer Background Colors

OuterBackgroundColor fills the outer segment. OuterTextColor paints its label and icon.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:  "ph-info",
	OuterLeftLabel: "Info",

	// OptionalFields
	OuterBackgroundColor: "emerald-500",
	OuterTextColor:       "neutral-50",
})

Inner Colors

InnerBackgroundColor and InnerTextColor style the inner segment only.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:  "ph-info",
	OuterLeftLabel: "Info",
	InnerIcon:      "ph-warning",
	InnerLabel:     "Warning",

	// OptionalFields
	InnerBackgroundColor: "emerald-500",
	InnerTextColor:       "neutral-50",
})

Side Element Actions

OuterLeftOnClickFunc and OuterRightOnClickFunc run on the outer side labels. OuterLeftLabelOneWayStatePath and OuterRightLabelOneWayStatePath bind the side labels to Alpine state. InnerLabelOneWayStatePath and InnerValueOneWayStatePath mirror Alpine state into the inner segment.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:             "ph-plus",
	OuterLeftLabel:            "Add",
	OuterLeftOnClickFunc:      "clickCount++",
	OuterRightIcon:            "ph-minus",
	OuterRightLabel:           "Remove",
	OuterRightOnClickFunc:     "if(clickCount > 0) clickCount--",
	InnerIcon:                 "ph-hash",
	InnerLabelOneWayStatePath: "clickCount",
})

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftIcon:                  "ph-pencil",
	OuterLeftLabelOneWayStatePath:  "leftActionLabel",
	OuterRightIcon:                 "ph-pencil",
	OuterRightLabelOneWayStatePath: "rightActionLabel",
})

Count:

Removable Tags

OnRemoveFunc renders a remove button on the tag. RemoveButtonLabel names it for screen readers.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftLabel: "Status: running",

	// OptionalFields
	OnRemoveFunc:         "showTag = false",
	RemoveButtonLabel:    "Remove status filter",
})

Text Case

TextCase transforms the tag labels. It accepts uiToolset.TextCaseNone (the default, as typed), TextCaseLower, TextCaseUpper, or TextCaseCapitalize.

@uiDisplay.Tag(uiDisplay.TagSettings{
	OuterLeftLabel: "Info",
	InnerLabel:     "Warning",

	// OptionalFields
	TextCase: uiToolset.TextCaseUpper,
})

API Response Toasts

displayToastWithApiResponse reads an Infinite API envelope and picks the tone from the status code: 207 is a partial success, 400 and above is an error, anything else is a success.

$store.toast.displayToastWithApiResponse(apiResponse, httpStatusCode)
$store.toast.displayToastWithApiResponse({readableMessage: "Server rebuilt"}, 200)

Mount Settings

AutoDismissSeconds sets how long each toast stays up; it defaults to 10 seconds. Background, text, ring, and radius accept Tailwind tokens. Mount one Toast per page: the mount configures the shared toast store.

@uiDisplay.Toast(uiDisplay.ToastSettings{
	// OptionalFields
	AutoDismissSeconds: 6,
	BackgroundColor:    "neutral-800",
	TextColor:          "neutral-50",
	Size:               uiDisplay.ToastSizeMd,
	RingThickness:      uiDisplay.ToastRingThicknessMd,
	RingColor:          "neutral-500",
	Radius:             uiDisplay.ToastRadiusMd,
})

Sizes

Size scales the button and its type: xs, sm, md, lg, or xl.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Button",

	// OptionalFields
	Size: uiControl.ButtonSizeMd,
})

Shapes

Shape rounds the button frame: square, rounded, or circular.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Button",

	// OptionalFields
	Shape: uiControl.ButtonShapeRounded,
})

Icons

IconLeft and IconRight flank the label with Phosphor icons. IconLeftOneWayStatePath and IconRightOneWayStatePath bind the icon class to Alpine state.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Info",

	// OptionalFields
	IconLeft:                 "ph-info",
	IconLeftOneWayStatePath:  "leftIconClass",
	IconRight:                "ph-arrow-right",
	IconRightOneWayStatePath: "rightIconClass",
})

Colors

Background and text colors accept Tailwind tokens. The Hover variants paint the hover state.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Save",

	// OptionalFields
	BackgroundColor:      "emerald-500",
	BackgroundColorHover: "emerald-600",
	TextColor:            "neutral-50",
	TextColorHover:       "neutral-50",
})

Rings

RingColor and RingThickness outline the button. The Hover variants paint the hover ring.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Red Ring",

	// OptionalFields
	BackgroundColor:      "red-500/10",
	BackgroundColorHover: "red-500/20",
	RingColor:            "red-500",
	RingColorHover:       "red-400",
	RingThickness:        uiControl.ButtonRingThicknessMd,
})

Tooltips

TooltipContent renders a tooltip on hover. TooltipPosition places it on any side. TooltipBackgroundColor, TooltipTextColor, TooltipRingColor, and TooltipRingThickness style the surface. The Min and Max width and height classes set its size limits. TooltipContentHtml accepts a component, and TooltipContentOneWayStatePath binds live text.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Top Tooltip",

	// OptionalFields
	TooltipContent:         "This tooltip appears on top",
	TooltipPosition:        uiToolset.TooltipPositionTop,
	TooltipBackgroundColor: "violet-950/95",
	TooltipTextColor:       "violet-100",
	TooltipRingColor:       "violet-500",
	TooltipRingThickness:   uiControl.ButtonRingThicknessMd,
	TooltipMinWidthClass:   "min-w-48",
	TooltipMaxWidthClass:   "max-w-72",
	TooltipMinHeightClass:  "min-h-12",
	TooltipMaxHeightClass:  "max-h-32",
})

Disabled Binding

IsDisabledOneWayStatePath disables the button from Alpine state. IsDisabled disables it outright. IsVisibleOneWayStatePath hides it from Alpine state, and OnClickPreventDefault calls preventDefault before the click handler.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Click Me",

	// OptionalFields
	OnClickFunc:               "clickCount++",
	OnClickPreventDefault:     true,
	IsDisabled:                true,
	IsDisabledOneWayStatePath: "shouldDisable",
	IsVisibleOneWayStatePath:  "isVisible",
})

Full-Width & Submit

IsFullWidth stretches the button to its container. IsSubmit renders a submit input for forms.

@uiControl.Button(uiControl.ButtonSettings{
	Label: "Save",

	// OptionalFields
	IsFullWidth: true,
	IsSubmit:    true,
})

Text Case

TextCase transforms the button label. It accepts uiToolset.TextCaseNone (the default, as typed), TextCaseLower, TextCaseUpper, or TextCaseCapitalize.

@uiControl.Button(uiControl.ButtonSettings{
	Label:    "New Record",
	TextCase: uiToolset.TextCaseUpper,
})

Sizes

Size scales the track, thumb, and labels: xs, sm, md, lg, or xl.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",

	// OptionalFields
	Size: uiControl.RangeSliderSizeMd,
})

Thumb Shapes

ThumbShape draws the thumb as circular, rounded, square, or pipe.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",

	// OptionalFields
	ThumbShape: uiControl.RangeSliderThumbShapeCircular,
})

Thumb Colors & Icons

Thumb background and text colors accept Tailwind tokens. ThumbLabel prints static text on the thumb, ThumbLabelIcon stamps an icon on it, and ThumbLabelOneWayStatePath prints live state on it.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",

	// OptionalFields
	ThumbBackgroundColor:      "emerald-500",
	ThumbTextColor:            "neutral-50",
	ThumbLabel:                "A",
	ThumbLabelIcon:            "ph-check",
	ThumbLabelOneWayStatePath: "sliderValue",
})

Value Bubble

ThumbValueBubbleEnabled shows the live value above or below the thumb. The default display mode always shows it; ThumbValueBubbleDisplayModeHover shows it only while the slider is hovered or dragged. Bubble colors, size, shape, ring, and position style it.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",

	// OptionalFields
	ThumbValueBubbleEnabled:         true,
	ThumbValueBubbleDisplayMode:     uiControl.RangeSliderThumbValueBubbleDisplayModeHover,
	ThumbValueBubblePosition:        uiControl.RangeSliderThumbValueBubblePositionTop,
	ThumbValueBubbleBackgroundColor: "red-500",
	ThumbValueBubbleTextColor:       "neutral-50",
	ThumbValueBubbleSize:            uiControl.RangeSliderThumbValueBubbleSizeLg,
	ThumbValueBubbleShape:           uiControl.RangeSliderThumbValueBubbleShapeRounded,
	ThumbValueBubbleRingColor:       "violet-500",
	ThumbValueBubbleRingThickness:   uiControl.RangeSliderThumbValueBubbleRingThicknessXl,
})

Track Labels

Track start and end labels print the range bounds from static values or Alpine state. Their position moves the labels above or below the track, and their icons mark each bound.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath:      "sliderValue",
	TrackStartValueOneWayStatePath: "rangeStart",
	TrackEndValueOneWayStatePath:   "rangeEnd",

	// OptionalFields
	TrackStartValueLabelEnabled:  true,
	TrackStartValueLabelPosition: uiControl.RangeSliderTrackValueLabelPositionTop,
	TrackStartValueLabelIcon:     "ph-arrow-left",
	TrackEndValueLabelEnabled:    true,
	TrackEndValueLabelPosition:   uiControl.RangeSliderTrackValueLabelPositionTop,
	TrackEndValueLabelIcon:       "ph-arrow-right",
})

Track Colors & Icons

Track background colors paint a solid or gradient track, and TrackFillColor paints the filled span. Label text colors and icons mark the bounds.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",
	TrackStartValue:           "0",
	TrackEndValue:             "100",

	// OptionalFields
	TrackBackgroundColor:          "neutral-50/15",
	TrackBackgroundColorFrom:      "red-500",
	TrackBackgroundColorVia:       "emerald-500",
	TrackBackgroundColorTo:        "cyan-500",
	TrackFillColor:                "sky-500",
	TrackFillColorVia:             "yellow-500",
	TrackStartValueLabelTextColor: "red-500",
	TrackEndValueLabelTextColor:   "cyan-500",
})

Steps & Ticks

TrackSteps snaps the thumb to increments. TrackTicksEnabled draws tick marks every TrackTickStep.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",

	// OptionalFields
	TrackSteps:       "20",
	TrackTicksEnabled: true,
	TrackTickStep:     "25",
})

Track Tooltip

TrackTooltipEnabled previews the value under the pointer as it moves along the track. The preview snaps to TrackSteps and clamps to the track bounds. TrackTooltipRingColor and TrackTooltipRingThickness outline it.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbValueTwoWayStatePath: "sliderValue",

	// OptionalFields
	TrackTooltipEnabled:         true,
	TrackTooltipPosition:        uiControl.RangeSliderTrackTooltipPositionTop,
	TrackTooltipBackgroundColor: "primary-500",
	TrackTooltipTextColor:       "neutral-50",
	TrackTooltipRingColor:       "primary-200",
	TrackTooltipRingThickness:   uiControl.RangeSliderTrackTooltipRingThicknessMd,
})

Dual-Thumb Mode

ThumbDualValueModeEnabled turns the slider into a range picker. Each thumb binds its own state path and aria label. The upper thumb takes its own colors, labels, icons, and bubble styling.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbDualValueModeEnabled:            true,
	ThumbValueTwoWayStatePath:            "lowerValue",
	ThumbAriaLabel:                       "Minimum price",
	ThumbUpperValueTwoWayStatePath:       "upperValue",
	ThumbUpperAriaLabel:                  "Maximum price",
	ThumbUpperTextColor:                  "neutral-50",
	ThumbUpperLabel:                      "Max",
	ThumbUpperLabelIcon:                  "ph-arrow-up",
	ThumbUpperLabelOneWayStatePath:       "upperValue",
	ThumbValueBubbleEnabled:              true,
	ThumbUpperValueBubbleEnabled:         true,
	ThumbValueBubbleRingColor:            "emerald-200",
	ThumbValueBubbleRingThickness:        uiControl.RangeSliderThumbValueBubbleRingThicknessSm,
	ThumbUpperValueBubbleDisplayMode:     uiControl.RangeSliderThumbValueBubbleDisplayModeHover,
	ThumbUpperValueBubbleTextColor:       "neutral-50",
	ThumbUpperValueBubbleRingColor:       "red-700",
	ThumbUpperValueBubbleRingThickness:   uiControl.RangeSliderThumbValueBubbleRingThicknessLg,
	ThumbUpperValueBubbleSize:            uiControl.RangeSliderThumbValueBubbleSizeLg,
	TrackStartValue:                      "0",
	TrackEndValue:                        "100",
})

Price Range: $ - $

Static Thumb Values

ThumbValue places one thumb without binding Alpine state. In dual mode ThumbUpperValue places the upper thumb.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbDualValueModeEnabled: true,
	ThumbValue:                "25",
	ThumbUpperValue:           "75",

	// OptionalFields
	TrackStartValue: "0",
	TrackEndValue:   "100",
})

Initial State Normalization

ShouldNormalizeInitialState orders crossed thumbs and pulls out-of-range values back into the track on load. Without it the thumbs start where the state says.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbDualValueModeEnabled:      true,
	ThumbValueTwoWayStatePath:      "lowerValue",
	ThumbUpperValueTwoWayStatePath: "upperValue",

	// OptionalFields
	ShouldNormalizeInitialState: true,
	TrackStartValue:             "0",
	TrackEndValue:               "100",
})

Normalized Range: $ - $, Overflow Range: $ - $, Slider:

Surface & Edges

Background, text, radius, shadow, ring, and padding accept Tailwind tokens.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoBody(),

	// OptionalFields
	BackgroundColor:  "primary-900/60",
	TextColor:        "neutral-50",
	PaddingSize:      uiStructural.CardPaddingSizeLg,
	BorderRadius:     uiStructural.CardBorderRadiusNone,
	ShadowSize:       uiStructural.CardShadowSizeLg,
	RingColor:        "primary-500",
	RingThickness:    uiStructural.CardRingThicknessMd,
	HeaderSubHeading: "Custom background, text, and ring",
	ActionsContent:   CardDemoActions(),
})

Header Icon Styles

HeaderIcon stamps a Phosphor icon in the header. Position, color, background, radius, and padding size style it.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoBody(),

	// OptionalFields
	HeaderIcon:                "ph-cube",
	HeaderIconPosition:        uiDisplay.HeaderIconPositionLeft,
	HeaderIconColor:           "primary-100",
	HeaderIconBackgroundColor: "primary-500/30",
	HeaderIconBorderRadius:    uiDisplay.HeaderIconBorderRadiusLg,
	HeaderIconPaddingSize:     uiDisplay.HeaderIconPaddingSizeMd,
})

Content Gap

GapSize sets the space between the header, body, and footer. The default CardGapSizeMd renders gap-3.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoBody(),
	FooterContent: CardDemoFooter(),

	// OptionalFields
	HeaderTitle: "Tight Gap",
	GapSize:     uiStructural.CardGapSizeSm,
})

Content-Only Card

With no header settings the card is a bare surface around MiddleContent.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoContentOnlyBody(),
})

State-Bound Header

HeaderTitleOneWayStatePath and HeaderSubHeadingOneWayStatePath drive the header text from Alpine state.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoBody(),

	// OptionalFields
	HeaderTitle:                      "Card Title",
	HeaderTitleOneWayStatePath:       "cardTitle",
	HeaderSubHeadingOneWayStatePath:  "cardSubHeading",
})

Custom Header Slot

HeaderContent replaces the standard header block with your own component.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoBody(),

	// OptionalFields
	HeaderContent: CardDemoCustomHeader(),
})

Header Styling

HeaderSize scales the title and sub-heading. HeaderTitleColor and HeaderSubHeadingColor tint them. TextCase transforms both.

@uiStructural.Card(uiStructural.CardSettings{
	MiddleContent: CardDemoBody(),

	// OptionalFields
	HeaderTitle:           "Styled Header",
	HeaderSubHeading:      "Sized, tinted, and uppercased",
	HeaderSize:            uiDisplay.HeaderSizeLg,
	HeaderTitleColor:      "amber-300",
	HeaderSubHeadingColor: "amber-200/70",
	TextCase:              uiToolset.TextCaseUpper,
})

Surface, Arrows, Dots, and Item Styling

The carousel paints its own surface (background, radius, padding, gap, ring, shadow, text color), its arrows (position, shape, size, colors), its dots (position, size, colors), and the item wrapper (background, radius, padding, ring, shadow). The plain item renderer here carries no card of its own, so the item styling comes from the carousel.

@uiStructural.Carousel(uiStructural.CarouselSettings[Record]{
	ItemRenderer: func(record Record) templ.Component { return CarouselDemoPlainItem(record) },
	Items:        records,

	// OptionalFields
	BackgroundColor:       "neutral-800/50",
	BorderRadius:          uiStructural.CarouselBorderRadiusXl,
	PaddingSize:           uiStructural.CarouselPaddingSizeLg,
	GapSize:               uiStructural.CarouselGapSizeLg,
	RingColor:             "secondary-500/30",
	RingThickness:         uiStructural.CarouselRingThicknessMd,
	ShadowSize:            uiStructural.CarouselShadowSizeLg,
	TextColor:             "neutral-100",
	ArrowsPosition:        uiStructural.CarouselArrowsPositionInside,
	ArrowsShape:           uiStructural.CarouselArrowsShapeRounded,
	ArrowsSize:            uiStructural.CarouselArrowsSizeLg,
	ArrowsBackgroundColor: "secondary-500/20",
	ArrowsIconColor:       "secondary-100",
	DotsPosition:          uiStructural.CarouselDotsPositionTop,
	DotsActiveColor:       "secondary-500",
	DotsInactiveColor:     "neutral-50/20",
	DotsSize:              uiStructural.CarouselDotsSizeLg,
	ItemBackgroundColor:   "neutral-50/5",
	ItemBorderRadius:      uiStructural.CarouselBorderRadiusLg,
	ItemPaddingSize:       uiStructural.CarouselPaddingSizeMd,
	ItemRingColor:         "neutral-50/10",
	ItemRingThickness:     uiStructural.CarouselRingThicknessXs,
	ItemShadowSize:        uiStructural.CarouselShadowSizeMd,
})

Autoplay

IsAutoplay advances the window on a timer. IsAutoplayPausedOnHover stops the timer while the pointer is over the carousel and resumes it when the pointer leaves.

@uiStructural.Carousel(uiStructural.CarouselSettings[Record]{
	ItemRenderer: func(record Record) templ.Component { return CarouselDemoItem(record) },
	Items:        records,

	// OptionalFields
	IsAutoplay:              true,
	IsAutoplayPausedOnHover: true,
	AutoplayIntervalMs:      3000,
})

Server Pagination

This demo pages the server chunk from the query URL. It serves fixed fragments keyed by page and page size, so only page and page size change the records. The filter bar and search box keep their values across a refresh, but they do not narrow these records. The search box sits below the track here through SearchBoxPosition.

@uiStructural.Carousel(uiStructural.CarouselSettings[Record]{
	ItemRenderer: func(record Record) templ.Component { return CarouselDemoItem(record) },
	Items:        records,
	QueryUrlTemplate: "/records?page={pageNumber}&itemsPerPage={itemsPerPage}&search={search}",

	// OptionalFields
	Filters:           filters,
	ItemsPerPage:      6,
	SearchBoxPosition: uiStructural.CarouselSearchBoxPositionBottom,
})

Item Tooltips

CarouselItemTooltip wraps one item and shows its tooltip on hover or on focus inside the item. Position places the tooltip, the colors and ring style its surface, and the width and height classes cap its size. The tooltip renders in a fixed layer on the document body, so the track viewport, a scroll container, and a modal cannot clip it. The card clamps its description to two lines; the tooltip carries the full text. The button opens the same carousel inside a modal.

templ CarouselTooltipDemoItem(record Record) {
	@uiStructural.CarouselItemTooltip(uiStructural.CarouselItemTooltipSettings{
		Content:         record.Description,
		BackgroundColor: "primary-900/95",
		Position:        uiToolset.TooltipPositionBottom,
		RingColor:       "primary-500/40",
		RingThickness:   uiStructural.CarouselRingThicknessXs,
		TextColor:       "primary-100",
		MinWidthClass:   "min-w-64",
		MaxWidthClass:   "max-w-72",
		MinHeightClass:  "min-h-16",
		MaxHeightClass:  "max-h-32",
		// ContentHtml accepts a component instead of plain text.
	}) {
		// The item markup, with a clamped description.
	}
}

Column Configuration

A column sets its alignment, width, and sortability. WidthPercent shares the row width, MaxWidthClass caps a long cell, and MinWidthClass holds a floor. A column with a SortKey renders a sort button; InitialSortKey and InitialSortDirection seed the active sort indicator.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: []uiStructural.DataTableColumnSettings[Record]{
		{Label: "Name", SortKey: "name", WidthPercent: 20, CellRenderer: nameCell},
		{Label: "Description", MaxWidthClass: "max-w-72 truncate", CellRenderer: descriptionCell},
		{Label: "Status", Alignment: uiStructural.TextAlignmentCenter, WidthPercent: 15, CellRenderer: statusCell},
		{Label: "CPU cores", SortKey: "cpuCores", Alignment: uiStructural.TextAlignmentRight, WidthPercent: 12, CellRenderer: cpuCell},
		{Label: "Created at", MinWidthClass: "min-w-28", CellRenderer: createdAtCell},
	},
	Rows: records,

	// OptionalFields
	InitialSortKey:       "name",
	InitialSortDirection: uiStructural.DataTableSortDirectionAsc,
})

Rows Configuration

RowIdResolver adds the selection column and identifies each row. RowLabelResolver names the row checkbox for screen readers. CheckboxShape, CheckboxSize, CheckboxCheckedColor, and CheckboxUncheckedColor change the selection checkbox. Select a row to see the colors change.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:              columns,
	Rows:                 records,
	RowIdResolver:        func(record Record) string { return record.Id },
	RowLabelResolver:     func(record Record) string { return record.Name },
	CheckboxShape:        uiForm.CheckboxInputShapeRounded,
	CheckboxSize:         uiForm.CheckboxInputSizeSm,
	CheckboxCheckedColor: "emerald-500",
	CheckboxUncheckedColor: "sky-500",
})