feat: tabs selection

components/tabs/tabs.go

@@ -6,6 +6,7 @@ import (
 
 // TabsProps is a struct that contains the properties of the Tabs component
 type TabsProps struct {
+	ID         string
 	ClassNames htmx.ClassNames
 }
 
@@ -41,20 +42,34 @@ func TabsBoxed(props TabsProps, children ...htmx.Node) htmx.Node {
 // TabProps is a struct that contains the properties of the Tab component
 type TabProps struct {
 	ClassNames htmx.ClassNames
+	Name       string
+	Label      string
 	Active     bool
+	Disabled   bool
 }
 
 // Tab is a component that renders a tab.
 func Tab(props TabProps, children ...htmx.Node) htmx.Node {
-	return htmx.A(
-		htmx.Merge(
-			htmx.ClassNames{
-				"tab":        true,
-				"tab-active": props.Active,
-			},
-			props.ClassNames,
+	return htmx.Fragment(
+		htmx.Input(
+			htmx.Type("radio"),
+			htmx.Name(props.Name),
+			htmx.Role("tab"),
+			htmx.Class("tab"),
+			htmx.Aria("label", props.Label),
+			htmx.If(props.Disabled, htmx.Disabled()),
+			htmx.If(props.Active, htmx.Checked()),
+		),
+		htmx.Div(
+			htmx.Merge(
+				htmx.ClassNames{
+					"tab-content": true,
+					"p-10":        true,
+				},
+				props.ClassNames,
+			),
+			htmx.Role("tabpanel"),
+			htmx.Group(children...),
 		),
-		htmx.Role("tab"),
-		htmx.Group(children...),
 	)
 }

examples/main.go

@@ -22,6 +22,7 @@ import (
 	"github.com/zeiss/fiber-htmx/components/navbars"
 	"github.com/zeiss/fiber-htmx/components/swap"
 	"github.com/zeiss/fiber-htmx/components/tables"
+	"github.com/zeiss/fiber-htmx/components/tabs"
 	"github.com/zeiss/fiber-htmx/components/tailwind"
 	"github.com/zeiss/fiber-htmx/components/utils"
 	"github.com/zeiss/fiber-htmx/sse"
@@ -367,6 +368,37 @@ func (c *exampleController) Get() error {
 											),
 										),
 									),
+									htmx.Div(
+										htmx.ClassNames{
+											"bg-base-100": true,
+										},
+										tabs.TabsBoxed(
+											tabs.TabsProps{},
+											tabs.Tab(
+												tabs.TabProps{
+													Name:   "my_tabs_1",
+													Label:  "Tab 1",
+													Active: true,
+												},
+												htmx.Text("Tab 1"),
+											),
+											tabs.Tab(
+												tabs.TabProps{
+													Name:  "my_tabs_1",
+													Label: "Tab 2",
+												},
+												htmx.Text("Tab 2"),
+											),
+											tabs.Tab(
+												tabs.TabProps{
+													Name:  "my_tabs_1",
+													Label: "Tab 3",
+												},
+												htmx.Text("Tab 3"),
+											),
+										),
+									),
+
 									alerts.Info(
 										alerts.AlertProps{},
 										htmx.Text("Hello, World!"),