Documentation
Components
Switch

Switch

The Switch component allows users to toggle between different views or options within a container. It supports highlights, hover effects, and icons, making it an interactive and visually appealing navigation element.

Usage

First of all, you need to import the Switch component from the kitchn package.

import { Switch } from "kitchn"

Default

Code Editor
() => {
  const [selected, setSelected] = useState("apple");

  const tabs = [
    { title: "Apple", value: "apple" },
    { title: "Orange", value: "orange" },
    { title: "Mango", value: "mango" },
  ];

  return (
    <Container align="flex-start">
      <Switch
        tabs={tabs}
        selected={selected}
        setSelected={setSelected}
      />
    </Container>
  )
}

Disabled

You can disable the dropdown's automatic width matching to its parent element using the disableMatchWidth prop.

Code Editor
() => {
  const [selected, setSelected] = useState("apple");

  const tabs = [
    { title: "Apple", value: "apple" },
    { title: "Orange", value: "orange" },
    { title: "Mango", value: "mango" },
  ];

  return (
    <Container align="flex-start">
      <Switch
        tabs={tabs}
        selected={selected}
        setSelected={setSelected}
        disabled
      />
    </Container>
  )
}

With Icons

Code Editor
() => {
  const [selected, setSelected] = useState("apple");

  const tabs = [
    { title: "Apple", value: "apple", icon: <RiAppleFill /> },
    { title: "Orange", value: "orange", icon: <RiAndroidFill /> },
    { title: "Mango", value: "mango", icon: <RiWindowsFill /> },
  ];

  return (
    <Container align="flex-start">
      <Switch
        tabs={tabs}
        selected={selected}
        setSelected={setSelected}
      />
    </Container>
  )
}

Props

NameTypeDefaultRequiredDescription
tabsArray<{ value: string; title: React.ReactNode; icon?: React.ReactNode }>[]YesAn array of tabs, each containing a value, title, and optionally an icon.
selectedstring""YesThe value of the currently selected tab.
setSelected(value: string) => voidnullYesFunction to update the selected tab value.
disabledbooleanfalseNoIf true, all tabs will be disabled, preventing user interaction.
highlightbooleantrueNoIf true, a highlight effect will be shown on hover.
hoverHeightRationumber1NoAdjusts the height of the hover highlight relative to the tab.
hoverWidthRationumber1NoAdjusts the width of the hover highlight relative to the tab.
Last updated on
SpinnerTabs