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.

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

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

Error States

IsInvalid shows the error style and ErrorMessage explains it. IsInvalidOneWayStatePath drives the error from Alpine state.

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

	// OptionalFields
	IsInvalid:                 true,
	ErrorMessage:              "You must accept the terms to continue.",
	IsInvalidOneWayStatePath:  "!hasAcceptedTerms",
})

Checked Colors

CheckedColor paints the filled box. UncheckedColor paints the empty box.

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

	// OptionalFields
	IsChecked:    true,
	CheckedColor: "primary-500",
})

Sizes

Each radio carries its own Size, so the group can scale per option.

@uiForm.InlineRadioGroup(uiForm.InlineRadioGroupSettings{
	Label: "Select an option",
	InputSettings: []uiForm.RadioInputSettings{
		{
			Label:           "Option 1",
			StateValue:      "option1",
			TwoWayStatePath: "groupSelection",
			Size:            uiForm.RadioInputSizeSm,
		},
	},
})

Value & Read-Only

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

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

	// OptionalFields
	Value:      "Lorem ipsum dolor sit amet.",
	IsReadOnly: 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.

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

	// OptionalFields
	TwoWayStatePath: "name",
	AffixLeftValue:  "goinfinite.net/",
	AffixRightValue: ".jpg",
})

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.

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

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

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.

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

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

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,
})

Sizes

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

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

	// OptionalFields
	Size: uiForm.RadioInputSizeMd,
})

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.

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

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

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>

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.

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

	// OptionalFields
	TwoWayStatePath: "description",
	HintValue:       "This is a helpful hint.",
	HintDisplay:     uiForm.InputHintDisplayDescription,
})

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 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.

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

	// OptionalFields
	LabelPosition: uiForm.ToggleSwitchLabelPositionLeft,
})

Color Variants

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

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

	// OptionalFields
	TrackBackgroundColor:        "emerald-900/40",
	TrackCheckedBackgroundColor: "emerald-500",
	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,
})

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.

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

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(),
})

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. 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",
	RingThickness:            uiDisplay.AlertRingThicknessLg,
	RingColor:                "cyan-400",
	ShadowSize:               uiDisplay.AlertShadowSizeXl,
	CloseIconBackgroundColor: "cyan-500/30",
})

State-Bound Content

DescriptionOneWayStatePath and IsCloseableOneWayStatePath drive the alert from Alpine state.

@uiDisplay.Alert(uiDisplay.AlertSettings{
	Title:                      "Dynamic Content Alert",
	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 0 seconds.

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

Type-to-Confirm

IsTypeToConfirmEnabled gates the confirm button behind a typed match. The match comes from TargetNameStatePath, TargetIdStatePath, or TypeToConfirmExpectedValue. The delete and critical presets enable this by default.

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

	// OptionalFields
	IsTypeToConfirmEnabled:     true,
	TypeToConfirmExpectedValue: "proceed",
})

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

MessageContent replaces the question copy. HeaderContent replaces the icon and title block. Size sets the dialog width.

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

	// OptionalFields
	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.

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

	// OptionalFields
	HeaderIconPosition: uiDisplay.HeaderIconPositionLeft,
})

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 as well to keep an accessible name when the header is custom.

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

	// OptionalFields
	HeaderContent:            ModalDemoHeader(),
	FooterContent:            ModalDemoFooter(),
	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",
	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. Pinning both axes retires the resize controls. IsMiddleContentScrollDisabled pins the body for embedded apps like a terminal.

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

	// OptionalFields
	InitialSize:                   uiDisplay.ModalSizeMd,
	WidthPercent:                  70,
	HeightPercent:                 45,
	IsMiddleContentScrollDisabled: true,
	IsVisibleTwoWayStatePath:      "isPinnedDimensionsModalVisible",
})

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.

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

	// OptionalFields
	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
	IsOffCanvas:                   true,
	IsOffCanvasTwoWayStatePath:    "isOffCanvas",
	IsVisibleTwoWayStatePath:      "isVisible",
})

Side

Side attaches the sidebar to the left or right edge.

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

	// OptionalFields
	SideTwoWayStatePath: "side",
})

Width & Background

Width accepts a Tailwind width class. BackgroundColor accepts a Tailwind background class, opacity included.

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

	// OptionalFields
	Width:           "w-46",
	BackgroundColor: "bg-primary-900/80",
})

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. Pair it with a transparent OuterBackgroundColor for an outlined tag.

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

	// OptionalFields
	OuterRingColor:       "emerald-500",
	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. 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",
})

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.

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

	// OptionalFields
	IconLeft:  "ph-info",
	IconRight: "ph-arrow-right",
})

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. TooltipContentHtml accepts a component, and TooltipContentOneWayStatePath binds live text.

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

	// OptionalFields
	TooltipContent:  "This tooltip appears on top",
	TooltipPosition: uiControl.ButtonTooltipPositionTop,
})

Disabled Binding

IsDisabledOneWayStatePath disables the button from Alpine state. IsDisabled disables it outright.

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

	// OptionalFields
	OnClickFunc:               "clickCount++",
	IsDisabledOneWayStatePath: "shouldDisable",
})

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. ThumbLabelIcon stamps an icon on the thumb and ThumbLabelOneWayStatePath prints live state on it.

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

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

Value Bubble

ThumbValueBubbleEnabled shows the live value above or below the thumb. Bubble colors, size, shape, ring, and position style it.

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

	// OptionalFields
	ThumbValueBubbleEnabled:         true,
	ThumbValueBubblePosition:        uiControl.RangeSliderThumbValueBubblePositionTop,
	ThumbValueBubbleBackgroundColor: "red-500",
	ThumbValueBubbleTextColor:       "neutral-50",
})

Track Labels

Track start and end labels print the range bounds. Their position moves them above or below the track.

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

	// OptionalFields
	TrackStartValueLabelEnabled:  true,
	TrackStartValueLabelPosition: uiControl.RangeSliderTrackValueLabelPositionTop,
	TrackEndValueLabelEnabled:    true,
	TrackEndValueLabelPosition:   uiControl.RangeSliderTrackValueLabelPositionTop,
})

Track Colors & Icons

Track background colors paint a solid or gradient track. Label text colors and icons mark the bounds.

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

	// OptionalFields
	TrackBackgroundColorFrom:      "red-500",
	TrackBackgroundColorVia:       "emerald-500",
	TrackBackgroundColorTo:        "cyan-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",
})

Dual-Thumb Mode

ThumbDualValueModeEnabled turns the slider into a range picker. Each thumb binds its own state path and aria label.

@uiControl.RangeSlider(uiControl.RangeSliderSettings{
	ThumbDualValueModeEnabled:      true,
	ThumbValueTwoWayStatePath:      "lowerValue",
	ThumbAriaLabel:                 "Minimum price",
	ThumbUpperValueTwoWayStatePath: "upperValue",
	ThumbUpperAriaLabel:            "Maximum price",
	ThumbValueBubbleEnabled:        true,
	ThumbUpperValueBubbleEnabled:   true,
	TrackStartValue:                "0",
	TrackEndValue:                  "100",
})

Price Range: $ - $

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,
})

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",
})

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; one without renders plain text.

@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.DataTableAlignmentCenter, WidthPercent: 15, CellRenderer: statusCell},
		{Label: "CPU cores", SortKey: "cpuCores", Alignment: uiStructural.DataTableAlignmentRight, WidthPercent: 12, CellRenderer: cpuCell},
		{Label: "Created at", MinWidthClass: "min-w-28", CellRenderer: createdAtCell},
	},
	Rows: records,
})

Rows Configuration

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

@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",
})

Filters

Each filter renders an editor and an active chip. InitialFilterValues seeds the starting values. A filter change updates the chips and the filter values.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:             columns,
	Rows:                records,
	Filters:             filters,
	InitialFilterValues: map[string]any{"status": "running"},
})

Search Box

The table renders a default search box when the query template carries the search placeholder. InitialSearchQuery seeds the starting text. SearchBoxAlignment places the box left, center, or right. Pass SearchBox to replace the default box.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:          columns,
	Rows:             records,
	QueryUrlTemplate: "/records?search={search}",

	// OptionalFields
	InitialSearchQuery: "alpha",
	SearchBoxAlignment: uiStructural.DataTableAlignmentCenter,
})

Header Actions

HeaderActions renders in the toolbar. The button here dispatches an event the panel counts.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: columns,
	Rows:    records,
	HeaderActions: uiControl.Button(uiControl.ButtonSettings{
		Label:       "Sync",
		IconLeft:    "ph-arrows-clockwise",
		OnClickFunc: "$dispatch('demo:header-action')",
		Size:        uiControl.ButtonSizeSm,
	}),
})

Bulk Actions

BulkActions renders in the toolbar only while at least one row is selected. Select a row to reveal the action.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: columns,
	Rows:    records,
	RowIdResolver: func(record Record) string { return record.Id },
	BulkActions: uiControl.Button(uiControl.ButtonSettings{
		Label:           "Archive",
		IconLeft:        "ph-archive",
		OnClickFunc:     "selectedRowIds = []",
		Size:            uiControl.ButtonSizeSm,
		BackgroundColor: "red-500/20",
		TextColor:       "red-200",
	}),
})

Row and Column Styling

HeaderClass paints the header row. IsStriped adds a zebra stripe. CellClass styles one column, and RowClassResolver styles each row from its data. A cell component that sets its own color overrides the row color.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns: []uiStructural.DataTableColumnSettings[Record]{
		{Label: "Name", CellClass: "font-bold", CellRenderer: nameCell},
		{Label: "Status", CellRenderer: statusCell},
		{Label: "CPU cores", Alignment: uiStructural.DataTableAlignmentRight, CellRenderer: cpuCell},
	},
	Rows: records,

	// OptionalFields
	HeaderClass: "bg-neutral-50/5",
	IsStriped:   true,
	RowClassResolver: func(record Record) string {
		if record.Status != "running" {
			return "text-neutral-400"
		}
		return ""
	},
})

Density and Header Text Case

Density changes the cell padding. TextCase changes the header capitalization. Both tables use the same columns and rows. The last column holds an icon button with a tooltip.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:  columns,
	Rows:     records,
	Density:  uiStructural.DataTableDensityDense,
	TextCase: uiToolset.TextCaseUpper,
})

Sticky Header

IsHeaderSticky pins the header and caps the scroll container, so the header stays visible while the body scrolls.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:        columns,
	Rows:           records,
	IsHeaderSticky: true,
})

Empty States

With no rows the table renders the EmptyState slot. Without the slot it renders the default message.

@uiStructural.DataTable(uiStructural.DataTableSettings[Record]{
	Columns:    columns,
	Rows:       nil,
	EmptyState: DataTableDemoEmptyState(),
})

Query Param Names

QueryParamName renames the filter in the DataTable URL template. Without it the filter Key is the parameter name.

@uiStructural.FilterBar(uiStructural.FilterBarSettings{
	Filters: []uiStructural.FilterSettings{
		{
			Key:            "environment",
			Label:          "Environment",
			Kind:           uiStructural.FilterKindEnumSelect,
			Options:        buildDemoEnvironmentOptions(),
			QueryParamName: "recordEnvironment",
		},
	},
	ValuesTwoWayStatePath: "filterValues",
})

Enum Radio Group Prefix

EnumSelectRadioGroupNamePrefix namespaces the generated radio inputs of enum selects, so two filter bars on one page do not collide.

@uiStructural.FilterBar(uiStructural.FilterBarSettings{
	Filters: []uiStructural.FilterSettings{
		{Key: "region", Label: "Region", Kind: uiStructural.FilterKindEnumSelect, Options: buildDemoRegionOptions()},
	},
	ValuesTwoWayStatePath: "filterValues",

	// OptionalFields
	EnumSelectRadioGroupNamePrefix: "myForm",
})

Dropdown Background

DropdownBackgroundColor paints the enum select dropdown with a Tailwind background token. DataTable forwards it as FilterDropdownBackgroundColor.

@uiStructural.FilterBar(uiStructural.FilterBarSettings{
	Filters: []uiStructural.FilterSettings{
		{Key: "status", Label: "Status", Kind: uiStructural.FilterKindEnumSelect, Options: statusOptions},
	},
	ValuesTwoWayStatePath: "filterValues",

	// OptionalFields
	DropdownBackgroundColor: "primary-500/95",
})

Multi-Value Filter

FilterKindMultiEnumSelect holds an array of selected values under one key. The chip lists every value, and the DataTable URL repeats the parameter once per value.

@uiStructural.FilterBar(uiStructural.FilterBarSettings{
	Filters: []uiStructural.FilterSettings{
		{Key: "status", Label: "Status", Kind: uiStructural.FilterKindMultiEnumSelect, Options: statusOptions},
	},
	ValuesTwoWayStatePath: "filterValues",
})

Page-Size Choices

ItemsPerPageSizeChoices replaces the default page-size options in the select.

@uiStructural.Pagination(uiStructural.PaginationSettings{
	PageNumberTwoWayStatePath:   "pageNumber",
	ItemsPerPageTwoWayStatePath: "itemsPerPage",
	ItemsTotal:                  240,

	// OptionalFields
	ItemsPerPageSizeChoices: []uint{5, 10, 25},
})

Disabled Binding

IsDisabledOneWayStatePath greys out the controls while a request is in flight.

@uiStructural.Pagination(uiStructural.PaginationSettings{
	PageNumberTwoWayStatePath:   "pageNumber",
	ItemsPerPageTwoWayStatePath: "itemsPerPage",
	ItemsTotal:                  240,

	// OptionalFields
	IsDisabledOneWayStatePath: "isPaginationDisabled",
})

Hidden On Single Page

IsHiddenWhenSinglePage hides only the page-number controls while the records fit on one page. The readout and the items-per-page select stay visible, and the controls return when a smaller page size needs more pages.

@uiStructural.Pagination(uiStructural.PaginationSettings{
	PageNumberTwoWayStatePath:   "pageNumber",
	ItemsPerPageTwoWayStatePath: "itemsPerPage",
	ItemsTotal:                  10,

	// OptionalFields
	IsHiddenWhenSinglePage: true,
})

Title Only

With no icon, sub-heading, or actions the heading is a single line.

@uiStructural.PageHeading(uiStructural.PageHeadingSettings{
	HeaderTitle: "Title Only",
	Level:       uiStructural.PageHeadingLevelSection,
})

Levels & Sizes

Level page renders the h1 page header and defaults to xl. Level section renders the h2 section heading and defaults to lg. HeaderSize scales either level: xs, sm, md, lg, or xl.

@uiStructural.PageHeading(uiStructural.PageHeadingSettings{
	HeaderTitle: "Records",
	Level:       uiStructural.PageHeadingLevelPage,

	// OptionalFields
	HeaderSize: uiDisplay.HeaderSizeSm,
})

Icon Styles

HeaderIcon stamps a Phosphor icon on the heading. Color and position style it. A section-level icon carries a chip background by default.

@uiStructural.PageHeading(uiStructural.PageHeadingSettings{
	HeaderTitle: "Records",

	// OptionalFields
	HeaderIcon:       "ph-star",
	HeaderIconColor:  "amber-400",
	HeaderIconPosition: uiDisplay.HeaderIconPositionLeft,
})

State-Bound Title

HeaderTitleOneWayStatePath and HeaderSubHeadingOneWayStatePath drive the heading text from Alpine state.

@uiStructural.PageHeading(uiStructural.PageHeadingSettings{
	HeaderTitle: "Records",

	// OptionalFields
	HeaderTitleOneWayStatePath:      "pageTitle",
	HeaderSubHeadingOneWayStatePath: "pageSubHeading",
})

Text Case

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

@uiStructural.PageHeading(uiStructural.PageHeadingSettings{
	HeaderTitle: "Network Interfaces",
	Level:       uiStructural.PageHeadingLevelSection,

	// OptionalFields
	TextCase: uiToolset.TextCaseUpper,
})