@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
74 lines • 4.36 kB
TypeScript
import * as React from "react";
import type { Props } from "./types";
/**
* @orbit-doc-start
* README
* ----------
* # SegmentedSwitch
*
* To implement SegmentedSwitch component into your project you'll need to add the import:
*
* ```jsx
* import SegmentedSwitch from "@kiwicom/orbit-components/lib/SegmentedSwitch";
* ```
*
* ## Usage
*
* ```jsx
* 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[]`](#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 | `string` | | Label of the component. |
* | ariaLabel | `string` | | Optional `aria-label` attribute. |
* | ariaLabelledby | `string` | | Optional `aria-labelledby` attribute. Receives an id of the element that labels 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. See [functional specs](#functional-specs). |
*
* ## Functional specs
*
* - The `error` prop overwrites the `help` prop, due to higher priority.
* - The `name` prop in the `Option` object is needed when having more that one SegmentedSwitch in the same form.
*
*
* @orbit-doc-end
*/
declare const SegmentedSwitch: ({ options, dataTest, onChange, showTooltip, spaceAfter, onFocus, maxWidth, help, error, label, ariaLabel, ariaLabelledby, }: Props) => React.JSX.Element;
export default SegmentedSwitch;
//# sourceMappingURL=index.d.ts.map