uiForm is a collection of components that make it easy to create forms.
An input field is a basic form element that allows users to enter text.
@uiForm.InputField(uiForm.InputFieldSettings{
InputType: uiForm.InputTypeText,
InputName: "name",
Label: "Name",
// OptionalFields
TwoWayStatePath: "name",
})<div x-data="{name: ''}"></div>Basic Input
Value & IsReadOnly
InputTypeNumberMin, Max & Step
AffixLeftValue & AffixRightValue
HintValue & HintDisplay
A textarea is a form element that allows users to enter multiple lines of text.
@uiForm.TextArea(uiForm.TextAreaSettings{
InputName: "description",
Label: "Description",
// OptionalFields
TwoWayStatePath: "description",
IsRequired: false,
IsReadOnly: false,
})<div x-data="{description: ''}"></div>Value & IsReadOnly
A radio input allows users to select one option from a set of options.
@uiForm.RadioInput(uiForm.RadioInputSettings{
Label: "Option 1",
StateValue: "option1",
TwoWayStatePath: "selectedOption",
})
@uiForm.RadioInput(uiForm.RadioInputSettings{
Label: "Option 2",
StateValue: "option2",
TwoWayStatePath: "selectedOption",
})<div x-data="{selectedOption: 'option2'}"></div>An inline radio group displays a set of radio options in a horizontal layout.
@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",
})<div x-data="{groupSelection: 'option2'}"></div>Select an option
A select input allows users to select one option from a dropdown list.
@uiForm.SelectInput(uiForm.SelectInputSettings{
InputName: "country",
Label: "Country",
// OptionalFields
FlatOptions: []string{"Argentina", "Brazil", "Chile"},
TwoWayStatePath: "country",
ShouldIncludeBlankOption: true,
})<div x-data="{country: ''}"></div>@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,
})<div x-data="{country: ''}"></div>@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,
})<div x-data="{country: ''}"></div>Click the dropdown to see the HTML labels.
uiDisplay is a collection of components for displaying content.
An accordion is a vertically stacked list of items that can be expanded or collapsed to reveal content.
@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(),
},
},
})This is the content for section 1. You can put any content here.
This is the content for section 2. You can put any content here.
This is the content for section 3. You can put any content here.
A sidebar is a vertical navigation component that can contain various types of content.
@uiDisplay.Sidebar(uiDisplay.SidebarSettings{
MiddleContent: SidebarDemoMiddle(),
// OptionalFields
HeaderContent: SidebarDemoHeader(),
FooterContent: SidebarDemoFooter(),
Width: "w-64",
BackgroundColor: "bg-neutral-50/5",
IsVisibleTwoWayStatePath: "isVisible",
IsCollapsedTwoWayStatePath: "isCollapsed",
AttachmentMode: uiDisplay.SidebarAttachmentModeFixed,
AttachmentModeTwoWayStatePath: "attachmentMode",
SideTwoWayStatePath: "side",
})<div x-data="{
isVisible: true,
isCollapsed: false,
attachmentMode: 'inline',
side: 'left'
}"></div>Controls
AttachmentMode
Side
A tag is a small label that can be used to categorize or identify content.
@uiDisplay.Tag(uiDisplay.TagSettings{
OuterLeftIcon: "ph-info",
OuterLeftLabel: "Info",
OuterRadius: uiDisplay.TagRadiusMd,
InnerIcon: "ph-warning",
InnerLabel: "Warning",
Size: uiDisplay.TagSizeXs,
})TagSizeXs to TagSizeXl
TagRadiusNone to TagRadiusFull
(OuterRadius & InnerRadius)
OuterRingColor
(w/ OuterBackgroundColor "transparent")
OuterBackgroundColor
(w/o OuterRingColor)
InnerBackgroundColor
Side Elements OnClickFunc
uiControl is a collection of components for controlling content.
A button is a clickable element that can be used to trigger an action.
@uiControl.Button(uiControl.ButtonSettings{
Label: "Click me",
IconLeft: "ph-info",
OnClickFunc: "alert('Button clicked!')",
})ButtonSizeXs to ButtonSizeXl
Button Shapes
IconLeft & IconRight
Button Colors
Button with Ring
Button with Tooltip
IsDisabledOneWayStatePath
Count:
A range slider allows users to select a value from a range by dragging a thumb along a track.
@uiControl.RangeSlider(uiControl.RangeSliderSettings{
ThumbValueTwoWayStatePath: "sliderValue",
TrackStartValue: "0",
TrackEndValue: "100",
TrackSteps: "1",
})<div x-data="{sliderValue: 50}"></div>Basic Slider
Value:
RangeSliderSizeXs to RangeSliderSizeXl
Thumb Shapes
Thumb Colors & Icons
ThumbValueBubble
Track Labels Positions
Track Colors & Icons
Dual Mode
Price Range: $ - $