@uiForm
uiForm is a collection of components that make it easy to create forms.
.InputField
An input field is a basic form element that allows users to enter text.
Usage
@uiForm.InputField(uiForm.InputFieldSettings{
InputType: uiForm.InputTypeText,
InputName: "name",
Label: "Name",
// OptionalFields
TwoWayStatePath: "name",
})Alpine.js Parent State (x-data)
<div x-data="{name: ''}"></div>Live Example
Basic Input
Value & IsReadOnly
InputTypeNumberMin, Max & Step
AffixLeftValue & AffixRightValue
HintValue & HintDisplay
.TextArea
A textarea is a form element that allows users to enter multiple lines of text.
Usage
@uiForm.TextArea(uiForm.TextAreaSettings{
InputName: "description",
Label: "Description",
// OptionalFields
TwoWayStatePath: "description",
IsRequired: false,
IsReadOnly: false,
})Alpine.js Parent State (x-data)
<div x-data="{description: ''}"></div>Live Example
Value & IsReadOnly
.RadioInput
A radio input allows users to select one option from a set of options.
Usage
@uiForm.RadioInput(uiForm.RadioInputSettings{
Label: "Option 1",
StateValue: "option1",
TwoWayStatePath: "selectedOption",
})
@uiForm.RadioInput(uiForm.RadioInputSettings{
Label: "Option 2",
StateValue: "option2",
TwoWayStatePath: "selectedOption",
})Alpine.js Parent State (x-data)
<div x-data="{selectedOption: 'option2'}"></div>Live Example
.InlineRadioGroup
An inline radio group displays a set of radio options in a horizontal layout.
Usage
@uiForm.InlineRadioGroup(uiForm.InlineRadioGroupSettings{
Label: "Select an option",
InputSettings: []uiForm.RadioInputSettings{
{
Label: "Option 1",
StateValue: "option1",
TwoWayStatePath: "groupSelection",
},
{
Label: "Option 2",
StateValue: "option2",
TwoWayStatePath: "groupSelection",
},
},
// OptionalFields
TwoWayStatePath: "groupSelection",
InputName: "group1",
})Alpine.js Parent State (x-data)
<div x-data="{groupSelection: 'option2'}"></div>Live Example
Select an option
.SelectInput
A select input allows users to select one option from a dropdown list.
Usage (w/FlatOptions)
@uiForm.SelectInput(uiForm.SelectInputSettings{
InputName: "country",
Label: "Country",
// OptionalFields
FlatOptions: []string{"Argentina", "Brazil", "Chile"},
TwoWayStatePath: "country",
ShouldIncludeBlankOption: true,
})Alpine.js Parent State (x-data)
<div x-data="{country: ''}"></div>Live Example
Usage (w/LabelValueOptions)
@uiForm.SelectInput(uiForm.SelectInputSettings{
InputName: "country",
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: ''}"></div>Live Example
Usage (w/LabelValueOptions and LabelHtml)
@uiForm.SelectInput(uiForm.SelectInputSettings{
InputName: "country",
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: ''}"></div>Live Example
Click the dropdown to see the HTML labels.
@uiDisplay
uiDisplay is a collection of components for displaying content.
.Alert
An alert is a notification component that displays important information to users.
Usage
@uiDisplay.Alert(uiDisplay.AlertSettings{
// OptionalFields
Title: "Alert Title",
Description: "This is an alert message.",
Variation: uiDisplay.AlertVariationInfo,
Size: uiDisplay.AlertSizeMd,
IsCloseable: true,
})Live Example
Alert Variations
Flashy Customization Examples
Alpine.js Integration
Alpine.js Parent State (x-data)
<div x-data="{alertMessage: 'Dynamic alert content!', isAlertCloseable: true}"></div>Dynamic Content
Dynamic Close Button
.Accordion
An accordion is a vertically stacked list of items that can be expanded or collapsed to reveal content.
Usage
@uiDisplay.Accordion(uiDisplay.AccordionSettings{
Items: []uiDisplay.AccordionItemSettings{
{
Title: "Section 1",
Content: AccordionDemoSection1(),
Icon: "ph-info",
},
{
Title: "Section 2",
Content: AccordionDemoSection2(),
},
{
Title: "Section 3",
Content: AccordionDemoSection3(),
},
},
})Live Example
Section 1
This is the content for section 1. You can put any content here.
Section 2
This is the content for section 2. You can put any content here.
Section 3
This is the content for section 3. You can put any content here.
.LoadingOverlay (htmx-ready)
A loading overlay displays a loading indicator over content to show that an operation is in progress.
Usage
@uiDisplay.LoadingOverlay(uiDisplay.LoadingOverlaySettings{
// OptionalFields
IsLoadingOneWayStatePath: "isLoading",
BackgroundColor: "neutral-900/80",
Icon: "ph-compass-rose",
IconSize: uiDisplay.LoadingOverlayIconSizeMd,
AnimationName: uiDisplay.LoadingOverlayAnimationNameSpin,
AnimationDurationSeconds: "2",
})Live Example
Alpine.js Parent State (x-data)
<div x-data="{isLoading: false}"></div>The page content will be covered by the loading overlay when triggered.
.Modal
A modal is a dialog box that appears on top of the main content to display additional information or request user input.
Usage
@uiDisplay.Modal(uiDisplay.ModalSettings{
MiddleContent: ModalDemoContent(),
// OptionalFields
Title: "Modal Title",
Size: uiDisplay.ModalSizeMd,
IsVisibleTwoWayStatePath: "isModalVisible",
})Alpine.js Parent State (x-data)
<div x-data="{
isModalVisible: false,
modalSize: 'md',
modalTitle: 'Interactive Modal'
}"></div>Live Example
Basic Modal
Different Sizes
Background Colors
Backdrop Colors
Ring Variations
Border Radius
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Dark Background Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Primary Background Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Secondary Background Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Blue Backdrop Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Red Backdrop Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Primary Ring Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Emerald Ring Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Red Ring Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Thin Violet Ring Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Square Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Small Radius Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Large Radius Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
Extra Large Radius Modal
This is the modal content area. You can put any content here including forms, images, or other components.
Features:
- Click outside to close (when closeable)
- Use the close button in the header
- Resize using the + and - buttons
- Responsive design for different screen sizes
.CloakLoading (pre-Alpine/HTMX)
A cloak loading screen that appears only before the JavaScript libraries are loaded to prevent FOUC (Flash of Unstyled Content).
Usage
@uiDisplay.CloakLoading(uiDisplay.CloakLoadingSettings{
// OptionalFields
HideDelaySeconds: "1",
BackgroundColor: "rgb(23, 23, 23)", // neutral-800
TextMessage: "Loading...",
TextColor: "rgb(250, 250, 250)", // neutral-50
TextSize: uiDisplay.CloakLoadingTextSizeMd,
Icon: "ph-compass-rose",
IconSize: uiDisplay.CloakLoadingIconSizeLg,
IconColor: "rgb(59, 130, 246)", // primary-400
IconAnimationName: uiDisplay.CloakLoadingAnimationNameSpin,
IconAnimationDurationSeconds: "3",
})Live Example
Since the demo is already loaded with Alpine.js, the CloakLoading component will behave like a regular loading overlay.
In a real application, this would be the first thing that appears when the page starts loading.
The page content will be covered by the cloak loading screen when triggered.
.Sidebar
A sidebar is a vertical navigation component that can contain various types of content.
Usage
@uiDisplay.Sidebar(uiDisplay.SidebarSettings{
MiddleContent: SidebarDemoMiddle(),
// OptionalFields
HeaderContent: SidebarDemoHeader(),
FooterContent: SidebarDemoFooter(),
BackgroundColor: "bg-neutral-50/5",
IsVisibleTwoWayStatePath: "isVisible",
IsCollapsedTwoWayStatePath: "isCollapsed",
AttachmentModeTwoWayStatePath: "attachmentMode",
SideTwoWayStatePath: "side",
IsOffCanvasTwoWayStatePath: "isOffCanvas",
})Live Example
Alpine.js Parent State (x-data)
<div x-data="{
isVisible: true,
isCollapsed: false,
attachmentMode: 'inline',
side: 'left',
isOffCanvas: false
}"></div>Controls
AttachmentMode
OffCanvas
Side
.Tag
A tag is a small label that can be used to categorize or identify content.
Usage
@uiDisplay.Tag(uiDisplay.TagSettings{
OuterLeftIcon: "ph-info",
OuterLeftLabel: "Info",
OuterRadius: uiDisplay.TagRadiusMd,
InnerIcon: "ph-warning",
InnerLabel: "Warning",
Size: uiDisplay.TagSizeXs,
})Live Example
TagSizeXs to TagSizeXl
TagRadiusNone to TagRadiusFull
(OuterRadius & InnerRadius)
OuterRingColor
(w/ OuterBackgroundColor "transparent")
OuterBackgroundColor
(w/o OuterRingColor)
InnerBackgroundColor
Side Elements OnClickFunc
.Toast
A toast is a temporary notification displayed to provide feedback to users.
Usage
@uiDisplay.Toast(uiDisplay.ToastSettings{
// OptionalFields
BackgroundColor: "neutral-800",
TextColor: "neutral-50",
Size: uiDisplay.ToastSizeMd,
RingThickness: uiDisplay.ToastRingThicknessMd,
RingColor: "neutral-500",
Radius: uiDisplay.ToastRadiusMd,
})Live Example
@uiControl
uiControl is a collection of components for controlling content.
.Button
A button is a clickable element that can be used to trigger an action.
Usage
@uiControl.Button(uiControl.ButtonSettings{
Label: "Click me",
IconLeft: "ph-info",
OnClickFunc: "alert('Button clicked!')",
})Live Example
ButtonSizeXs to ButtonSizeXl
Button Shapes
IconLeft & IconRight
Button Colors
Button with Ring
Button with Tooltip
IsDisabledOneWayStatePath
Count:
.RangeSlider
A range slider allows users to select a value from a range by dragging a thumb along a track.
Usage
@uiControl.RangeSlider(uiControl.RangeSliderSettings{
ThumbValueTwoWayStatePath: "sliderValue",
TrackStartValue: "0",
TrackEndValue: "100",
TrackSteps: "1",
})Alpine.js Parent State (x-data)
<div x-data="{sliderValue: 50}"></div>Live Example
Basic Slider
Value:
RangeSliderSizeXs to RangeSliderSizeXl
Thumb Shapes
Thumb Colors & Icons
ThumbValueBubble
Track Labels Positions
Track Colors & Icons
Dual Mode
Price Range: $ - $