Segmented — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download segmented -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Segmented } from "@/components/ui/segmented";
import { reactive } from "vue";
import * as UI from "@/components/ui/segmented";

const Component = UI.Segmented;

const args = reactive(
  {
    "value": "overview",
    "options": [
        { label: "Overview", value: "overview" },
        { label: "Settings", value: "settings" },
    ],
    "disabled": false,
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <Segmented
    v-model="args.value"
    :options="args.options"
    :disabled="args.disabled"
  />
</template>

Props API

Prop	Type	Required
`options`	`SegmentedOption[]`	Yes
`value`	`string`	No
`onChange`	`(value: string) => void`	No

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { Segmented } from "@/components/ui/segmented";
import * as UI from "@/components/ui/segmented";

const Component = UI.Segmented;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const options = [
  { label: "Overview", value: "overview" },
  { label: "Settings", value: "settings" },
];
const value = ref("overview");
</script>

<template>
  <Segmented v-model="value" :options="options" />
</template>

Icons

<script setup lang="ts">
import { ref } from "vue";
import { Segmented } from "@/components/ui/segmented";
import * as UI from "@/components/ui/segmented";

const Component = UI.Segmented;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const options = [
  { label: "Profile", value: "profile", icon: "User" as const },
  { label: "Team", value: "team", icon: "Users" as const },
  { label: "Settings", value: "settings", icon: "Settings" as const },
];
const value = ref("profile");
</script>

<template>
  <Segmented v-model="value" :options="options" />
</template>

Three Options

<script setup lang="ts">
import { ref } from "vue";
import { Segmented } from "@/components/ui/segmented";
import * as UI from "@/components/ui/segmented";

const Component = UI.Segmented;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const options = [
  { label: "Day", value: "day" },
  { label: "Week", value: "week" },
  { label: "Month", value: "month" },
];
const value = ref("week");
</script>

<template>
  <Segmented v-model="value" :options="options" />
</template>

Disabled

<script setup lang="ts">
import { ref } from "vue";
import { Segmented } from "@/components/ui/segmented";
import * as UI from "@/components/ui/segmented";

const Component = UI.Segmented;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const options = [
  { label: "Active", value: "active" },
  { label: "Archived", value: "archived" },
  { label: "Deleted", value: "deleted", disabled: true },
];
const value = ref("active");
</script>

<template>
  <Segmented v-model="value" :options="options" />
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default
`class`	`string`	`—`
`modelValue`	`string`	`—`
`options`	`Array<{ label: string \| number; value: string; icon?: IconName; disabled?: boolean; class?: string; }>`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.