SegmentedControlProps — Kuito Documentation

Usage

Switch between day, week and month

tsx

import { SegmentedControl, Text, VStack, signal } from 'kuito';

const VIEWS = [
  { value: 'day', label: 'Day' },
  { value: 'week', label: 'Week' },
  { value: 'month', label: 'Month' },
];

export default function Plan() {
  const view = signal('week');

  return (
    <VStack gap={8} padding={16}>
      <SegmentedControl label="View" options={VIEWS} value={view} height={32} />
      <Text>{view.value}</Text>
    </VStack>
  );
}

Type declaration

export type SegmentedControlProps = {
  /** A segment each, in order; each value names one option. */
  options: SelectOption[];
  /**
   * The chosen segment's value; none selected while it names no option.
   * Two-way when given a signal: the control writes it as the user picks.
   */
  value?: string;
  disabled?: boolean;
  /** The value of the segment the user picked. */
  onChange?: (value: string) => void;
};

Members 4

Name	Type	Required	Description
`options`	`SelectOption[]`	Yes	A segment each, in order; each value names one option.
`value`	`string`	No	The chosen segment's value; none selected while it names no option. Two-way when given a signal: the control writes it as the user picks.
`disabled`	`boolean`	No	—
`onChange`	`(value: string) => void`	No	The value of the segment the user picked.

onChange — method signatures

Signatures

(value: string): void

Parameters

Name	Type	Required	Description
`value`	`string`	Yes	—

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.