# Segment Набор компонентов для создания группы сегментов.
Структура для сегментов похожа на структуру маркированных списков. ## SegmentGroup Props (свойства) для компонента SegmentGroup: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"filled\"","value":[{"value":"\"clear\""},{"value":"\"filled\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\" | \"xl\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""},{"value":"\"xl\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"pilled","type":{"name":"boolean"}},{"name":"stretch","type":{"name":"boolean"}},{"name":"filledBackground","type":{"name":"boolean"}},{"name":"orientation","type":{"name":"enum","raw":"\"vertical\"","value":[{"value":"\"vertical\""}]}},{"name":"selectionMode","type":{"name":"enum","raw":"\"multiple\" | \"single\"","value":[{"value":"\"multiple\""},{"value":"\"single\""}]}},{"name":"clip","type":{"name":"boolean"}},{"name":"hasBackground","type":{"name":"boolean"}}] ## SegmentItem Props (свойства) для компонента SegmentItem: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"accent\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"accent\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\" | \"xl\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""},{"value":"\"xl\""}]}},{"name":"pilled","type":{"name":"boolean"}},{"name":"label","type":{"name":"ReactNode"}},{"name":"customHandleSelect","type":{"name":"((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"contentRight","type":{"name":"ReactNode"}},{"name":"maxItemWidth","type":{"name":"Width<string | number>"}}] ### Провайдер контекста Оберните в  `SegmentProvider`  компонент, в котором будут использованы SegmentGroup с SegmentItem.
Внутри данного провайдера есть доступ к хуку  `useSegment` . ### Выбранные по умолчанию SegmentItem Можно задать выбранные по умолчанию сегменты с помощью свойства  `defaultSelected` .
Оно передается в  `SegmentProvider` , в виде массива  `value`  элементов. 
### Обязательный активный SegmentItem С помощью свойства  `singleSelectedRequired`  задается поведение,
при котором один сегмент должен быть активным. 
### Вертикальное отображение Для смены ориентации передаем  `orientation: 'vertical'`