SegmentedSwitch

To implement SegmentedSwitch component into your project you’ll need to add the import:

import SegmentedSwitch from "@kiwicom/orbit-components/lib/SegmentedSwitch";

Usage

const Component = () => {
  const [value, setValue] = React.useState("");
  return (
    <SegmentedSwitch
      onChange={ev => setValue(ev.currentTarget.value)}
      help={helpMessage}
      error={errorMessage}
      options={[
        { label: "First option", value: "1" },
        { label: "Second option", value: "2" },
      ]}
    />
  );
};

Props

Table below contains all types of the props available in the SegmentedSwitch component.

Name	Type	Default	Description
dataTest	`string`		Optional prop for testing purposes.
help	`React.Node`		Optional help message.
error	`React.Node`		Optional error message.
options	`Option[]`		Array of options.
onChange	`(ev: ChangeEvent<HTMLInputElement>) => void`		Function for handling change event.
onFocus	`(ev: FocusEvent<HTMLInputElement>) => void`		Function for handling focus event.
label	`React.Node`		Label of the component.
showTooltip	`boolean`	`false`	Show tooltip.

Option

Table below contains all types of the props available for object in Option array.

Name	Type	Description
value	`string \\| number`	The value of the Option.
label	`string`	The label for the Option.
defaultChecked	`boolean`	Set option checked by default.
disabled	`boolean`	If `true`, the Option will be disabled.
name	`string`	Name of the Option.

Functional specs

The error prop overwrites the help prop, due to higher priority.