# Steps Props (свойства) для компонента Steps: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"accent\"","value":[{"value":"\"default\""},{"value":"\"accent\""}]}},{"name":"itemView","type":{"name":"enum","raw":"\"default\" | \"positive\" | \"warning\" | \"negative\"","value":[{"value":"\"default\""},{"value":"\"positive\""},{"value":"\"warning\""},{"value":"\"negative\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"items","type":{"name":"StepItemProps[]"}},{"name":"orientation","type":{"name":"enum","raw":"StepsOrientation","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},{"name":"contentAlign","type":{"name":"enum","raw":"StepsContentAlign","value":[{"value":"\"center\""},{"value":"\"left\""}]}},{"name":"hasLine","type":{"name":"boolean"}},{"name":"hasContent","type":{"name":"enum","raw":"StepsContent","value":[{"value":"\"none\""},{"value":"\"all\""},{"value":"\"active\""}]}},{"name":"hasLoader","type":{"name":"boolean"}},{"name":"current","type":{"name":"number"}},{"name":"status","type":{"name":"enum","raw":"StepStatus","value":[{"value":"\"active\""},{"value":"\"inactive\""},{"value":"\"completed\""}]}},{"name":"onChange","type":{"name":"((item: StepItemProps, index: number, prevIndex?: number) => void)"}}] ## Внешнее вид :::info
Важно! Значения  `ItemView`  применяются к шагу только когда его статус — inProgress.
::: Внешний вид компонента регулируется 2 свойствами: #### View Свойство применяется ко всему компоненту и принимает следующие значения: `default` `accent` #### ItemView Свойство применяется к индикатору шага и заголовку, и принимает следующие значения: `default` `negative` `warning` `positive` ## Внешнее управление
```tsx
import React, { useState } from 'react';
import { Steps, Button } from '@salutejs/plasma-web';
export function App() {
const items = [{
indicator: 1,
}, {
indicator: 2,
}, {
indicator: 3,
}];
const [current, setCurrent] = useState<number>(0);
const onClick = () => setCurrent(() => current + 1);
return (
<section>
<Steps items={items} current={current} />
<br />
<Button view="secondary" onClick={onClick}>
Next
</Button>
</section>
);
}
```
## Управление через onChange и статус шага 
```tsx
import React, { useState } from 'react';
import { Steps, StepItemProps  } from '@salutejs/plasma-web';
export function App() {
const initialItems = [{
indicator: 1,
title: 'Title',
content: 'Content',
}, {
indicator: 2,
title: 'Title',
content: 'Content',
}, {
indicator: 3,
title: 'Title',
content: 'Content',
}];
const [items, setItems] = useState(initialItems);
const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
if (prevIndex !== undefined) {
items[prevIndex].status = 'completed';
}
items[index].status = 'active';
setItems([...items]);
};
return (
<section>
<Steps items={items} onChange={onChange} />
</section>
);
}
```
## Использование свойства ItemView 
```tsx
import React, { useState } from 'react';
import { Steps, StepItemProps  } from '@salutejs/plasma-web';
export function App() {
const initialItems = [{
indicator: 1,
title: 'Title',
content: 'Content',
}, {
indicator: 2,
title: 'Title',
content: 'Content',
}, {
indicator: 3,
title: 'Title',
content: 'Content',
}];
const [items, setItems] = useState(initialItems);
const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
if (prevIndex !== undefined) {
items[prevIndex].status = 'completed';
}
items[index].status = 'active';
setItems([...items]);
};
return (
<section>
<Steps items={items} itemView="positive" onChange={onChange} />
</section>
);
}
```