@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.
62 lines (48 loc) • 3.79 kB
Markdown
# 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.