Basic example
Basic tabs are divided into 2 main sections - TETabs
(containing TEItem
's) and TETabsContent
(containing TETabsPane
's).
Use useState
to connect TETabs
with TETabsContent
.
import React, { useState } from "react";
import {
TETabs,
TETabsContent,
TETabsItem,
TETabsPane,
} from "tw-elements-react";
export default function TabsBasicExample(): JSX.Element {
const [basicActive, setBasicActive] = useState("tab1");
const handleBasicClick = (value: string) => {
if (value === basicActive) {
return;
}
setBasicActive(value);
};
return (
<div className="mb-3">
<TETabs>
<TETabsItem
onClick={() => handleBasicClick("tab1")}
active={basicActive === "tab1"}
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleBasicClick("tab2")}
active={basicActive === "tab2"}
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleBasicClick("tab3")}
active={basicActive === "tab3"}
>
Messages
</TETabsItem>
<TETabsItem
onClick={() => handleBasicClick("tab4")}
active={basicActive === "tab4"}
disabled
>
Contact
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={basicActive === "tab1"}>Tab 1 content</TETabsPane>
<TETabsPane show={basicActive === "tab2"}>Tab 2 content</TETabsPane>
<TETabsPane show={basicActive === "tab3"}>Tab 3 content</TETabsPane>
<TETabsPane show={basicActive === "tab4"}>Tab 4 content</TETabsPane>
</TETabsContent>
</div>
);
}
Fill
To proportionately fill all available space with your TETabsItem
's, use fill
property. Notice that all horizontal space is occupied, but not every tabs item has the same width.
import React, { useState } from "react";
import {
TETabs,
TETabsContent,
TETabsItem,
TETabsPane,
} from "tw-elements-react";
export default function TabsFill(): JSX.Element {
const [fillActive, setFillActive] = useState("tab1");
const handleFillClick = (value: string) => {
if (value === fillActive) {
return;
}
setFillActive(value);
};
return (
<div className="mb-3">
<TETabs fill>
<TETabsItem
onClick={() => handleFillClick("tab1")}
active={fillActive === "tab1"}
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleFillClick("tab2")}
active={fillActive === "tab2"}
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleFillClick("tab3")}
active={fillActive === "tab3"}
>
Messages
</TETabsItem>
<TETabsItem
onClick={() => handleFillClick("tab4")}
active={fillActive === "tab4"}
disabled
>
Contact
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={fillActive === "tab1"}>Tab 1 content</TETabsPane>
<TETabsPane show={fillActive === "tab2"}>Tab 2 content</TETabsPane>
<TETabsPane show={fillActive === "tab3"}>Tab 3 content</TETabsPane>
<TETabsPane show={fillActive === "tab4"}>Tab 4 content</TETabsPane>
</TETabsContent>
</div>
);
}
Justify
For equal-width elements, use justify
property. All horizontal space will be occupied by TETabsItem
's, but unlike the fill property above, every TETabsItem
will be the same width.
import React, { useState } from "react";
import {
TETabs,
TETabsContent,
TETabsItem,
TETabsPane,
} from "tw-elements-react";
export default function TabsJustify(): JSX.Element {
const [justifyActive, setJustifyActive] = useState("tab1");
const handleJustifyClick = (value: string) => {
if (value === justifyActive) {
return;
}
setJustifyActive(value);
};
return (
<div className="mb-3">
<TETabs justify>
<TETabsItem
onClick={() => handleJustifyClick("tab1")}
active={justifyActive === "tab1"}
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleJustifyClick("tab2")}
active={justifyActive === "tab2"}
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleJustifyClick("tab3")}
active={justifyActive === "tab3"}
>
Messages
</TETabsItem>
<TETabsItem
onClick={() => handleJustifyClick("tab4")}
active={justifyActive === "tab4"}
disabled
>
Contact
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={justifyActive === "tab1"}>Tab 1 content</TETabsPane>
<TETabsPane show={justifyActive === "tab2"}>Tab 2 content</TETabsPane>
<TETabsPane show={justifyActive === "tab3"}>Tab 3 content</TETabsPane>
<TETabsPane show={justifyActive === "tab4"}>Tab 4 content</TETabsPane>
</TETabsContent>
</div>
);
}
Vertical
Make vertical tabs by using vertical
property. Add also classes flex items-start
to the wrapper div
.
import React, { useState } from "react";
import {
TETabs,
TETabsContent,
TETabsItem,
TETabsPane,
} from "tw-elements-react";
export default function TabsVertical(): JSX.Element {
const [verticalActive, setVerticalActive] = useState("tab1");
const handleVerticalClick = (value: string) => {
if (value === verticalActive) {
return;
}
setVerticalActive(value);
};
return (
<div className="flex items-start">
<TETabs vertical>
<TETabsItem
onClick={() => handleVerticalClick("tab1")}
active={verticalActive === "tab1"}
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleVerticalClick("tab2")}
active={verticalActive === "tab2"}
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleVerticalClick("tab3")}
active={verticalActive === "tab3"}
>
Messages
</TETabsItem>
<TETabsItem
onClick={() => handleVerticalClick("tab4")}
active={verticalActive === "tab4"}
disabled
>
Contact
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={verticalActive === "tab1"}>Tab 1 content</TETabsPane>
<TETabsPane show={verticalActive === "tab2"}>Tab 2 content</TETabsPane>
<TETabsPane show={verticalActive === "tab3"}>Tab 3 content</TETabsPane>
<TETabsPane show={verticalActive === "tab4"}>Tab 4 content</TETabsPane>
</TETabsContent>
</div>
);
}
With buttons
You can also use buttons instead of tabs to change the visible content.
import React, { useState } from "react";
import {
TETabs,
TETabsContent,
TETabsItem,
TETabsPane,
} from "tw-elements-react";
export default function TabsWithButtons(): JSX.Element {
const [buttonActive, setButtonActive] = useState("tab1");
const handleButtonClick = (value: string) => {
if (value === buttonActive) {
return;
}
setButtonActive(value);
};
return (
<div className="mb-3">
<TETabs>
<TETabsItem
onClick={() => handleButtonClick("tab1")}
active={buttonActive === "tab1"}
tag="button"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleButtonClick("tab2")}
active={buttonActive === "tab2"}
tag="button"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleButtonClick("tab3")}
active={buttonActive === "tab3"}
tag="button"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={buttonActive === "tab1"}>
Tab 1 content button version
</TETabsPane>
<TETabsPane show={buttonActive === "tab2"}>
Tab 2 content button version
</TETabsPane>
<TETabsPane show={buttonActive === "tab3"}>
Tab 3 content button version
</TETabsPane>
</TETabsContent>
</div>
);
}
Color options
Use prop color
to change the color of the tabs (e.g. TETabsItem color="primary"
).
import React, { useState } from "react";
import {
TETabs,
TETabsContent,
TETabsItem,
TETabsPane,
} from "tw-elements-react";
export default function TabsColors(): JSX.Element {
const [colorsActive, setColorsActive] = useState({
tab1: "tab1",
tab2: "tab1",
tab3: "tab1",
tab4: "tab1",
tab5: "tab1",
tab6: "tab1",
tab7: "tab1",
tab8: "tab1",
});
const handleColorsClick = (value: object) => {
if (value === colorsActive) {
return;
}
setColorsActive({ ...colorsActive, ...value });
};
return (
<div className="mb-3">
{/* color primary */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab1: "tab1" })}
active={colorsActive.tab1 === "tab1"}
color="primary"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab1: "tab2" })}
active={colorsActive.tab1 === "tab2"}
color="primary"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab1: "tab3" })}
active={colorsActive.tab1 === "tab3"}
color="primary"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab1 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab1 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab1 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
{/* color secondary */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab2: "tab1" })}
active={colorsActive.tab2 === "tab1"}
color="secondary"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab2: "tab2" })}
active={colorsActive.tab2 === "tab2"}
color="secondary"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab2: "tab3" })}
active={colorsActive.tab2 === "tab3"}
color="secondary"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab2 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab2 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab2 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
{/* color success */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab3: "tab1" })}
active={colorsActive.tab3 === "tab1"}
color="success"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab3: "tab2" })}
active={colorsActive.tab3 === "tab2"}
color="success"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab3: "tab3" })}
active={colorsActive.tab3 === "tab3"}
color="success"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab3 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab3 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab3 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
{/* color danger */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab4: "tab1" })}
active={colorsActive.tab4 === "tab1"}
color="danger"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab4: "tab2" })}
active={colorsActive.tab4 === "tab2"}
color="danger"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab4: "tab3" })}
active={colorsActive.tab4 === "tab3"}
color="danger"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab4 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab4 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab4 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
{/* color warning */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab5: "tab1" })}
active={colorsActive.tab5 === "tab1"}
color="warning"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab5: "tab2" })}
active={colorsActive.tab5 === "tab2"}
color="warning"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab5: "tab3" })}
active={colorsActive.tab5 === "tab3"}
color="warning"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab5 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab5 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab5 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
{/* color info */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab6: "tab1" })}
active={colorsActive.tab6 === "tab1"}
color="info"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab6: "tab2" })}
active={colorsActive.tab6 === "tab2"}
color="info"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab6: "tab3" })}
active={colorsActive.tab6 === "tab3"}
color="info"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab6 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab6 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab6 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
{/* color light */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab7: "tab1" })}
active={colorsActive.tab7 === "tab1"}
color="light"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab7: "tab2" })}
active={colorsActive.tab7 === "tab2"}
color="light"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab7: "tab3" })}
active={colorsActive.tab7 === "tab3"}
color="light"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab7 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab7 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab7 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
{/* color dark */}
<TETabs>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab8: "tab1" })}
active={colorsActive.tab8 === "tab1"}
color="dark"
>
Home
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab8: "tab2" })}
active={colorsActive.tab8 === "tab2"}
color="dark"
>
Profile
</TETabsItem>
<TETabsItem
onClick={() => handleColorsClick({ ...colorsActive, tab8: "tab3" })}
active={colorsActive.tab8 === "tab3"}
color="dark"
>
Messages
</TETabsItem>
</TETabs>
<TETabsContent>
<TETabsPane show={colorsActive.tab8 === "tab1"}>
Tab 1 content
</TETabsPane>
<TETabsPane show={colorsActive.tab8 === "tab2"}>
Tab 2 content
</TETabsPane>
<TETabsPane show={colorsActive.tab8 === "tab3"}>
Tab 3 content
</TETabsPane>
</TETabsContent>
</div>
);
}
Related resources
If you are looking for more advanced options, try Bootstrap Tabs from MDBootstrap.