В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` .
```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` .
```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта.
```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
`renderTarget`  - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром:  `value` .
Пропс  `renderItem`  для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
В примере использован другой наш компонент - Cell.
```tsx
import React from 'react';
import { Select, Cell } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
},
];
const renderTarget = (itemData, opened) => {
console.log(opened);
if (Array.isArray(itemData)) {
if (itemData.length === 0) {
return (
<div style={{ padding: '0.5rem 0' }}>
<Cell
view="default"
title="Выберите страну"
subtitle="Subtitle"
label="Label"
/>
</div>
);
}
const title = itemData.map((item) => item.label).join(', ');
return (
<div style={{ padding: '0.5rem 0.75rem' }}>
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
</div>
);
}
}
const renderItem = ({ value, label }) => (
<Cell
view="default"
title={label}
label="Top left"
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
/>
)
return (
<div style={{ height: '300px' }}>
<div style={{ width: '400px' }}>
<Select
items={items}
value={multipleValue}
onChange={setMultipleValue}
multiselect
renderTarget={renderTarget}
renderItem={renderItem}
/>
</div>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
`renderTarget`  - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром:  `value` .
Пропс  `renderItem`  для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
В примере использован другой наш компонент - Cell. ```tsx
import React from 'react';
import { Select, Cell } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
},
];
const renderTarget = (itemData, opened) => {
console.log(opened);
if (Array.isArray(itemData)) {
if (itemData.length === 0) {
return (
<div style={{ padding: '0.5rem 0' }}>
<Cell
view="default"
title="Выберите страну"
subtitle="Subtitle"
label="Label"
/>
</div>
);
}
const title = itemData.map((item) => item.label).join(', ');
return (
<div style={{ padding: '0.5rem 0.75rem' }}>
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
</div>
);
}
}
const renderItem = ({ value, label }) => (
<Cell
view="default"
title={label}
label="Top left"
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
/>
)
return (
<div style={{ height: '300px' }}>
<div style={{ width: '400px' }}>
<Select
items={items}
value={multipleValue}
onChange={setMultipleValue}
multiselect
renderTarget={renderTarget}
renderItem={renderItem}
/>
</div>
</div>
);
}
```
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать. Для такой реализации имеется пропс  `portal` , который принимает либо  `ref`  либо  `id`  html-тега. Также нужно прокинуть проп  `listWidth` , чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
```tsx
import React, { useRef } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const ref = useRef(null)
return (
<div style={{ position: "relative", height: "300px" }} ref={ref}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
</div>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
`renderTarget`  - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром:  `value` .
Пропс  `renderItem`  для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
В примере использован другой наш компонент - Cell. ```tsx
import React from 'react';
import { Select, Cell } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
},
];
const renderTarget = (itemData, opened) => {
console.log(opened);
if (Array.isArray(itemData)) {
if (itemData.length === 0) {
return (
<div style={{ padding: '0.5rem 0' }}>
<Cell
view="default"
title="Выберите страну"
subtitle="Subtitle"
label="Label"
/>
</div>
);
}
const title = itemData.map((item) => item.label).join(', ');
return (
<div style={{ padding: '0.5rem 0.75rem' }}>
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
</div>
);
}
}
const renderItem = ({ value, label }) => (
<Cell
view="default"
title={label}
label="Top left"
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
/>
)
return (
<div style={{ height: '300px' }}>
<div style={{ width: '400px' }}>
<Select
items={items}
value={multipleValue}
onChange={setMultipleValue}
multiselect
renderTarget={renderTarget}
renderItem={renderItem}
/>
</div>
</div>
);
}
```
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать. Для такой реализации имеется пропс  `portal` , который принимает либо  `ref`  либо  `id`  html-тега. Также нужно прокинуть проп  `listWidth` , чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала. ```tsx
import React, { useRef } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const ref = useRef(null)
return (
<div style={{ position: "relative", height: "300px" }} ref={ref}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
</div>
</div>
);
}
```
`value`  и  `onChange`  - опциональные параметры. Если вы хотите  `uncontrolled`  вариант компонента - их пробрасывать необязательно.
```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" />
</div>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
`renderTarget`  - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром:  `value` .
Пропс  `renderItem`  для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
В примере использован другой наш компонент - Cell. ```tsx
import React from 'react';
import { Select, Cell } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
},
];
const renderTarget = (itemData, opened) => {
console.log(opened);
if (Array.isArray(itemData)) {
if (itemData.length === 0) {
return (
<div style={{ padding: '0.5rem 0' }}>
<Cell
view="default"
title="Выберите страну"
subtitle="Subtitle"
label="Label"
/>
</div>
);
}
const title = itemData.map((item) => item.label).join(', ');
return (
<div style={{ padding: '0.5rem 0.75rem' }}>
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
</div>
);
}
}
const renderItem = ({ value, label }) => (
<Cell
view="default"
title={label}
label="Top left"
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
/>
)
return (
<div style={{ height: '300px' }}>
<div style={{ width: '400px' }}>
<Select
items={items}
value={multipleValue}
onChange={setMultipleValue}
multiselect
renderTarget={renderTarget}
renderItem={renderItem}
/>
</div>
</div>
);
}
```
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать. Для такой реализации имеется пропс  `portal` , который принимает либо  `ref`  либо  `id`  html-тега. Также нужно прокинуть проп  `listWidth` , чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала. ```tsx
import React, { useRef } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const ref = useRef(null)
return (
<div style={{ position: "relative", height: "300px" }} ref={ref}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
</div>
</div>
);
}
```
`value`  и  `onChange`  - опциональные параметры. Если вы хотите  `uncontrolled`  вариант компонента - их пробрасывать необязательно. ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" />
</div>
</div>
);
}
```
Свойство  `virtual`  позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство  `listMaxHeight` .
Работает только в одноуровневых списках.
```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
return (
<div style={{ width: "300px", height: "300px" }}>
<Select
items={items}
virtual
listMaxHeight="200px"
placeholder="Placeholder"
label="Label"
helperText="Helper text"
/>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
`renderTarget`  - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром:  `value` .
Пропс  `renderItem`  для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
В примере использован другой наш компонент - Cell. ```tsx
import React from 'react';
import { Select, Cell } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
},
];
const renderTarget = (itemData, opened) => {
console.log(opened);
if (Array.isArray(itemData)) {
if (itemData.length === 0) {
return (
<div style={{ padding: '0.5rem 0' }}>
<Cell
view="default"
title="Выберите страну"
subtitle="Subtitle"
label="Label"
/>
</div>
);
}
const title = itemData.map((item) => item.label).join(', ');
return (
<div style={{ padding: '0.5rem 0.75rem' }}>
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
</div>
);
}
}
const renderItem = ({ value, label }) => (
<Cell
view="default"
title={label}
label="Top left"
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
/>
)
return (
<div style={{ height: '300px' }}>
<div style={{ width: '400px' }}>
<Select
items={items}
value={multipleValue}
onChange={setMultipleValue}
multiselect
renderTarget={renderTarget}
renderItem={renderItem}
/>
</div>
</div>
);
}
```
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать. Для такой реализации имеется пропс  `portal` , который принимает либо  `ref`  либо  `id`  html-тега. Также нужно прокинуть проп  `listWidth` , чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала. ```tsx
import React, { useRef } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const ref = useRef(null)
return (
<div style={{ position: "relative", height: "300px" }} ref={ref}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
</div>
</div>
);
}
```
`value`  и  `onChange`  - опциональные параметры. Если вы хотите  `uncontrolled`  вариант компонента - их пробрасывать необязательно. ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" />
</div>
</div>
);
}
```
Свойство  `virtual`  позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство  `listMaxHeight` .
Работает только в одноуровневых списках. ```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
return (
<div style={{ width: "300px", height: "300px" }}>
<Select
items={items}
virtual
listMaxHeight="200px"
placeholder="Placeholder"
label="Label"
helperText="Helper text"
/>
</div>
);
}
```
Пример с бесконечной загрузкой элементов в списке.
```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
function getRandomData() {
return Array(10)
.fill(1)
.map(() => {
const n = Math.floor(Math.random() * 90000000) + 10000000;
return { value: n.toString(), label: n.toString() };
});
};
const [items, setItems] = useState(getRandomData());
const [isInfiniteLoading, setIsInfiniteLoading] = useState(false);
const getData = async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(getRandomData());
}, 1500);
});
};
const handleScroll = async (e) => {
if (isInfiniteLoading) return;
if (e.target.scrollTop + e.target.offsetHeight + 10 > e.target.scrollHeight) {
setIsInfiniteLoading(true);
const res = await getData();
setItems([...items, ...res]);
setIsInfiniteLoading(false);
}
};
return (
<div style={{ height: "300px" }}>
<div style={{ width: "300px" }}>
<Select
items={items}
listMaxHeight="200px"
listOverflow="scroll"
placeholder="Placeholder"
label="Label"
helperText="Helper text"
onScroll={handleScroll}
afterList={isInfiniteLoading ? <center>Загружаю...</center> : undefined}
/>
</div>
</div>
);
}
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
`renderTarget`  - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром:  `value` .
Пропс  `renderItem`  для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
В примере использован другой наш компонент - Cell. ```tsx
import React from 'react';
import { Select, Cell } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
},
];
const renderTarget = (itemData, opened) => {
console.log(opened);
if (Array.isArray(itemData)) {
if (itemData.length === 0) {
return (
<div style={{ padding: '0.5rem 0' }}>
<Cell
view="default"
title="Выберите страну"
subtitle="Subtitle"
label="Label"
/>
</div>
);
}
const title = itemData.map((item) => item.label).join(', ');
return (
<div style={{ padding: '0.5rem 0.75rem' }}>
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
</div>
);
}
}
const renderItem = ({ value, label }) => (
<Cell
view="default"
title={label}
label="Top left"
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
/>
)
return (
<div style={{ height: '300px' }}>
<div style={{ width: '400px' }}>
<Select
items={items}
value={multipleValue}
onChange={setMultipleValue}
multiselect
renderTarget={renderTarget}
renderItem={renderItem}
/>
</div>
</div>
);
}
```
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать. Для такой реализации имеется пропс  `portal` , который принимает либо  `ref`  либо  `id`  html-тега. Также нужно прокинуть проп  `listWidth` , чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала. ```tsx
import React, { useRef } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const ref = useRef(null)
return (
<div style={{ position: "relative", height: "300px" }} ref={ref}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
</div>
</div>
);
}
```
`value`  и  `onChange`  - опциональные параметры. Если вы хотите  `uncontrolled`  вариант компонента - их пробрасывать необязательно. ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" />
</div>
</div>
);
}
```
Свойство  `virtual`  позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство  `listMaxHeight` .
Работает только в одноуровневых списках. ```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
return (
<div style={{ width: "300px", height: "300px" }}>
<Select
items={items}
virtual
listMaxHeight="200px"
placeholder="Placeholder"
label="Label"
helperText="Helper text"
/>
</div>
);
}
```
Пример с бесконечной загрузкой элементов в списке. ```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
function getRandomData() {
return Array(10)
.fill(1)
.map(() => {
const n = Math.floor(Math.random() * 90000000) + 10000000;
return { value: n.toString(), label: n.toString() };
});
};
const [items, setItems] = useState(getRandomData());
const [isInfiniteLoading, setIsInfiniteLoading] = useState(false);
const getData = async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(getRandomData());
}, 1500);
});
};
const handleScroll = async (e) => {
if (isInfiniteLoading) return;
if (e.target.scrollTop + e.target.offsetHeight + 10 > e.target.scrollHeight) {
setIsInfiniteLoading(true);
const res = await getData();
setItems([...items, ...res]);
setIsInfiniteLoading(false);
}
};
return (
<div style={{ height: "300px" }}>
<div style={{ width: "300px" }}>
<Select
items={items}
listMaxHeight="200px"
listOverflow="scroll"
placeholder="Placeholder"
label="Label"
helperText="Helper text"
onScroll={handleScroll}
afterList={isInfiniteLoading ? <center>Загружаю...</center> : undefined}
/>
</div>
</div>
);
}
```
Работа с кнопкой "Выбрать всё" осуществляется через свойство  `selectAllOptions`  только в режиме  `multiselect` :
```tsx
type SelectAllProps = {
checked?: boolean;
indeterminate?: boolean;
label?: string;
onClick?: () => void;
sticky?: boolean;
};
```
В режиме  `textfield`  доступны только следующие варианты  `view` :  `default` ,  `warning` ,  `positive`  и  `negative` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
</div>
</div>
);
}
```
В режиме  `button`  недоступны следующие пропсы:  `contentLeft` ,  `label` ,  `labelPlacement` ,  `placeholder`  и  `helperText` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
</div>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
</div>
</div>
);
}
```
Есть возможность задать значения по дефолту (главное, чтобы они находились в  `items` ). Также можно управлять состоянием снаружи селекта. ```tsx
import React from 'react';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: 'flex', gap: '30px', height: '300px' }}>
<div style={{width: '300px'}}>
<Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
</div>
<Button onClick={() => setMultipleValue([])}>Очистить</Button>
</div>
);
}
```
Пропс  `renderValue`  для кастомной настройки  `value`  внутри таргета. Принимает коллбэк с двумя параметрами:  `value`  и  `label` . ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [singleValue, setSingleValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const renderValue = (itemData): string => {
if (!Array.isArray(itemData)) {
return `${itemData.value} - ${itemData.label}`;
}
return '';
};
return (
<div style={{ height: '300px' }}>
<div style={{ width: '300px' }}>
<Select
items={items}
label="Label"
placeholder="Placeholder"
value={singleValue}
onChange={setSingleValue}
renderValue={renderValue}
/>
</div>
</div>
);
}
```
`renderTarget`  - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром:  `value` .
Пропс  `renderItem`  для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами:  `value`  и  `label` .
В примере использован другой наш компонент - Cell. ```tsx
import React from 'react';
import { Select, Cell } from '@salutejs/plasma-web';
export function App() {
const [multipleValue, setMultipleValue] = useState([]);
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
},
];
const renderTarget = (itemData, opened) => {
console.log(opened);
if (Array.isArray(itemData)) {
if (itemData.length === 0) {
return (
<div style={{ padding: '0.5rem 0' }}>
<Cell
view="default"
title="Выберите страну"
subtitle="Subtitle"
label="Label"
/>
</div>
);
}
const title = itemData.map((item) => item.label).join(', ');
return (
<div style={{ padding: '0.5rem 0.75rem' }}>
<Cell view="default" title={title} subtitle="Subtitle" label="Label" />
</div>
);
}
}
const renderItem = ({ value, label }) => (
<Cell
view="default"
title={label}
label="Top left"
contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
/>
)
return (
<div style={{ height: '300px' }}>
<div style={{ width: '400px' }}>
<Select
items={items}
value={multipleValue}
onChange={setMultipleValue}
multiselect
renderTarget={renderTarget}
renderItem={renderItem}
/>
</div>
</div>
);
}
```
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать. Для такой реализации имеется пропс  `portal` , который принимает либо  `ref`  либо  `id`  html-тега. Также нужно прокинуть проп  `listWidth` , чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала. ```tsx
import React, { useRef } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState('');
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const ref = useRef(null)
return (
<div style={{ position: "relative", height: "300px" }} ref={ref}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
</div>
</div>
);
}
```
`value`  и  `onChange`  - опциональные параметры. Если вы хотите  `uncontrolled`  вариант компонента - их пробрасывать необязательно. ```tsx
import React from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: '300px' }}>
<div style={{width: '300px'}}>
<Select items={items} label="Label" placeholder="Placeholder" />
</div>
</div>
);
}
```
Свойство  `virtual`  позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство  `listMaxHeight` .
Работает только в одноуровневых списках. ```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
return (
<div style={{ width: "300px", height: "300px" }}>
<Select
items={items}
virtual
listMaxHeight="200px"
placeholder="Placeholder"
label="Label"
helperText="Helper text"
/>
</div>
);
}
```
Пример с бесконечной загрузкой элементов в списке. ```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
function getRandomData() {
return Array(10)
.fill(1)
.map(() => {
const n = Math.floor(Math.random() * 90000000) + 10000000;
return { value: n.toString(), label: n.toString() };
});
};
const [items, setItems] = useState(getRandomData());
const [isInfiniteLoading, setIsInfiniteLoading] = useState(false);
const getData = async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(getRandomData());
}, 1500);
});
};
const handleScroll = async (e) => {
if (isInfiniteLoading) return;
if (e.target.scrollTop + e.target.offsetHeight + 10 > e.target.scrollHeight) {
setIsInfiniteLoading(true);
const res = await getData();
setItems([...items, ...res]);
setIsInfiniteLoading(false);
}
};
return (
<div style={{ height: "300px" }}>
<div style={{ width: "300px" }}>
<Select
items={items}
listMaxHeight="200px"
listOverflow="scroll"
placeholder="Placeholder"
label="Label"
helperText="Helper text"
onScroll={handleScroll}
afterList={isInfiniteLoading ? <center>Загружаю...</center> : undefined}
/>
</div>
</div>
);
}
```
Работа с кнопкой "Выбрать всё" осуществляется через свойство  `selectAllOptions`  только в режиме  `multiselect` : ```tsx
type SelectAllProps = {
checked?: boolean;
indeterminate?: boolean;
label?: string;
onClick?: () => void;
sticky?: boolean;
};
```
Вся логика выбора элементов и взаимодействия с компонентом лежит на стороне пользователя.
```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const flatItems = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
{
value: 'buenos_aires',
label: 'Буэнос-Айрес',
},
{
value: 'cordoba',
label: 'Кордова',
},
{
value: 'bogota',
label: 'Богота',
},
{
value: 'medellin',
label: 'Медельин',
},
];
const [value, setValue] = useState([]);
const [checked, setChecked] = useState(false);
const [indeterminate, setIndeterminate] = useState(false);
const handleClick = () => {
if (checked && !indeterminate) {
setValue([]);
} else {
setValue(flatItems.map((item) => item.value));
}
};
React.useEffect(() => {
if (value.length === 0) {
setChecked(false);
setIndeterminate(false);
} else if (value.length === flatItems.length) {
setChecked(true);
setIndeterminate(false);
} else {
setChecked(true);
setIndeterminate(true);
}
}, [value]);
return (
<div style={{ display: "block", width: "300px", height: "300px" }}>
<Select
value={value}
onChange={setValue}
label="Label"
placeholder="Placeholder"
items={flatItems}
multiselect
selectAllOptions={{
checked,
indeterminate,
onClick: handleClick,
}}
listOverflow="auto"
listMaxHeight="200px"
/>
</div>
);
}
```
## Взаимодействие с disabled-элементами Изнутри компонента взаимодействие с disabled-элементами  невозможно . Ниже представлены примеры с  `selected`  и  `unselected`  disabled-элементом. 
```tsx
import React, { useState } from 'react';
import { Select } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
disabled: true,
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const [value, setValue] = useState(['brazil']);
return (
<div style={{ display: "flex", height: "300px" }}>
<div style={{ width: "300px" }}>
<Select
multiselect
label="Label"
placeholder="Placeholder"
items={items}
/>
</div>
<div style={{ width: "300px" }}>
<Select
multiselect
label="Label"
placeholder="Placeholder"
items={items}
value={value}
onChange={setValue}
isTargetAmount
/>
</div>
</div>
);
}
```
## Использование с React Hook Form и нативной формой :::caution Использование атрибута  `name` 
Используйте  свойство  `name`  только когда это необходимо. Оно влияет на выходной тип в  `onChange` .
::: Работа с  `react-hook-form`  через  `register` .
```tsx
import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
type Inputs = {
Select: string,
SelectMulti: string[]
}
const { register, handleSubmit } = useForm<Inputs>({
defaultValues: {
Select: 'north_america',
SelectMulti: ['brazil']
}
});
const onSubmit: SubmitHandler<Inputs> = (data) => {
console.log(data);
};
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: "flex", gap: "30px", height: "300px" }}>
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<Select
items={items}
{...register('Select')}
/>
<Select
items={items}
{...register('SelectMulti')}
multiselect
/>
<Button type="submit">Отправить</Button>
</form>
</div>
);
}
```
## Использование с React Hook Form и нативной формой :::caution Использование атрибута  `name` 
Используйте  свойство  `name`  только когда это необходимо. Оно влияет на выходной тип в  `onChange` .
::: Работа с  `react-hook-form`  через  `register` . ```tsx
import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
type Inputs = {
Select: string,
SelectMulti: string[]
}
const { register, handleSubmit } = useForm<Inputs>({
defaultValues: {
Select: 'north_america',
SelectMulti: ['brazil']
}
});
const onSubmit: SubmitHandler<Inputs> = (data) => {
console.log(data);
};
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: "flex", gap: "30px", height: "300px" }}>
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<Select
items={items}
{...register('Select')}
/>
<Select
items={items}
{...register('SelectMulti')}
multiselect
/>
<Button type="submit">Отправить</Button>
</form>
</div>
);
}
```
Работа с  `react-hook-form`  через  `controller` .
```tsx
import React from 'react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
type Inputs = {
select: string,
selectMulti: string[]
}
const { control, handleSubmit } = useForm<Inputs>({
defaultValues: {
select: 'north_america',
selectMulti: ['brazil']
}
});
const onSubmit: SubmitHandler<Inputs> = (data) => {
console.log(data);
};
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: "flex", gap: "30px", height: "300px" }}>
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<Controller
control={control}
name="Select"
render={({ field: { onChange, value, ref } }) => (
<Select
items={items}
ref={ref}
value={value}
onChange={onChange}
/>
)}
/>
<Controller
control={control}
name="SelectMulti"
render={({ field: { onChange, value, ref } }) => (
<Select
items={items}
ref={ref}
value={value}
onChange={onChange}
multiselect
/>
)}
/>
<Button type="submit">Отправить</Button>
</form>
</div>
);
}
```
## Использование с React Hook Form и нативной формой :::caution Использование атрибута  `name` 
Используйте  свойство  `name`  только когда это необходимо. Оно влияет на выходной тип в  `onChange` .
::: Работа с  `react-hook-form`  через  `register` . ```tsx
import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
type Inputs = {
Select: string,
SelectMulti: string[]
}
const { register, handleSubmit } = useForm<Inputs>({
defaultValues: {
Select: 'north_america',
SelectMulti: ['brazil']
}
});
const onSubmit: SubmitHandler<Inputs> = (data) => {
console.log(data);
};
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: "flex", gap: "30px", height: "300px" }}>
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<Select
items={items}
{...register('Select')}
/>
<Select
items={items}
{...register('SelectMulti')}
multiselect
/>
<Button type="submit">Отправить</Button>
</form>
</div>
);
}
```
Работа с  `react-hook-form`  через  `controller` . ```tsx
import React from 'react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
type Inputs = {
select: string,
selectMulti: string[]
}
const { control, handleSubmit } = useForm<Inputs>({
defaultValues: {
select: 'north_america',
selectMulti: ['brazil']
}
});
const onSubmit: SubmitHandler<Inputs> = (data) => {
console.log(data);
};
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: "flex", gap: "30px", height: "300px" }}>
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<Controller
control={control}
name="Select"
render={({ field: { onChange, value, ref } }) => (
<Select
items={items}
ref={ref}
value={value}
onChange={onChange}
/>
)}
/>
<Controller
control={control}
name="SelectMulti"
render={({ field: { onChange, value, ref } }) => (
<Select
items={items}
ref={ref}
value={value}
onChange={onChange}
multiselect
/>
)}
/>
<Button type="submit">Отправить</Button>
</form>
</div>
);
}
```
Работа с нативной формой.
```tsx
import React from 'react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import { Select, Button } from '@salutejs/plasma-web';
export function App() {
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
for (const [name, value] of formData) {
console.log(name, value);
}
};
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ display: "flex", gap: "30px", height: "300px" }}>
<form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Select label="Select" name="Select" defaultValue={"brazil"} items={items} />
<Select label="Select" name="SelectMulti" defaultValue={["brazil"]} items={items} multiselect />
<Button type="submit">Отправить</Button>
</form>
</div>
);
}
```