Source: https://app-studio-6167b.web.app/docs/Vertical

app-studio

# Vertical

A flexible layout component that arranges its children in a vertical stack using CSS Flexbox. Perfect for creating column layouts, forms, navigation menus, and any vertical arrangement of elements with powerful spacing and alignment options.

[View component source](https://github.com/rize-network/app-studio)

## Import

```ts
import { Vertical } from 'app-studio';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical, Text } from 'app-studio';

export function VerticalExample() {
  return (
    <Vertical
      gap={12}
      padding={24}
      backgroundColor="color-blue-50"
      borderRadius={12}
    >
      <Text fontWeight="bold">A simple vertical stack</Text>
      <Text>Use gap to space children consistently.</Text>
      <Text color="color-blue-800">Compose it with any component.</Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Vertical**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | `—` | Source URL of the media. |
| `alt` | `string` | `—` | See the type and source declaration for this property. |
| `controls` | `boolean` | `—` | See the type and source declaration for this property. |
| `muted` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property. |
| `loop` | `boolean` | `—` | See the type and source declaration for this property. |
| `poster` | `string` | `—` | See the type and source declaration for this property. |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property. |
| `preload` | `"" \| "metadata" \| "auto" \| "none"` `""``"metadata"``"auto"``"none"` | `—` | See the type and source declaration for this property. |
| `crossOrigin` | `"" \| "anonymous" \| "use-credentials"` `""``"anonymous"``"use-credentials"` | `—` | See the type and source declaration for this property. |
| `srcSet` | `string` | `—` | See the type and source declaration for this property. |
| `sizes` | `string` | `—` | See the type and source declaration for this property. |
| `loading` | `"eager" \| "lazy"` `"eager"``"lazy"` | `—` | See the type and source declaration for this property. |
| `referrerPolicy` | `react.HTMLAttributeReferrerPolicy` `""``"no-referrer"``"no-referrer-when-downgrade"``"origin"``"origin-when-cross-origin"``"same-origin"``"strict-origin"``"strict-origin-when-cross-origin"``"unsafe-url"` | `—` | See the type and source declaration for this property. |
| `decoding` | `"auto" \| "async" \| "sync"` `"auto"``"async"``"sync"` | `—` | See the type and source declaration for this property. |
| `name` | `string` | `—` | Field name used by forms and Formik bindings. |
| `value` | `string \| number \| readonly string[]` | `—` | Current controlled value. Update it from the matching change callback. |
| `defaultValue` | `string \| number \| readonly string[]` | `—` | Initial value for uncontrolled usage. |
| `multiple` | `boolean` | `—` | See the type and source declaration for this property. |
| `disabled` | `boolean` | `—` | Disables user interaction. |
| `readOnly` | `boolean` | `—` | See the type and source declaration for this property. |
| `required` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoComplete` | `string` | `—` | See the type and source declaration for this property. |
| `autoFocus` | `boolean` | `—` | See the type and source declaration for this property. |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty. |
| `pattern` | `string` | `—` | See the type and source declaration for this property. |
| `min` | `string \| number` | `—` | Minimum allowed value. |
| `max` | `string \| number` | `—` | Maximum allowed value. |
| `minLength` | `number` | `—` | Minimum permitted input length. |
| `maxLength` | `number` | `—` | Maximum permitted input length. |
| `step` | `string \| number` | `—` | Increment between allowed values. |
| `form` | `string` | `—` | See the type and source declaration for this property. |
| `formAction` | `string` | `—` | See the type and source declaration for this property. |
| `formEncType` | `string` | `—` | See the type and source declaration for this property. |
| `formMethod` | `"dialog" \| "get" \| "post"` `"dialog"``"get"``"post"` | `—` | See the type and source declaration for this property. |
| `formNoValidate` | `boolean` | `—` | See the type and source declaration for this property. |
| `formTarget` | `string` | `—` | See the type and source declaration for this property. |
| `rows` | `number` | `—` | See the type and source declaration for this property. |
| `cols` | `number` | `—` | See the type and source declaration for this property. |
| `wrap` | `string` | `—` | HTML textarea wrap attribute. Browsers accept 'hard' \| 'soft' \| 'off' but the DOM type widens to plain `string`, so we mirror that here. |
| `list` | `string` | `—` | See the type and source declaration for this property. |
| `accept` | `string` | `—` | See the type and source declaration for this property. |
| `capture` | `boolean \| "user" \| "environment"` | `—` | See the type and source declaration for this property. |
| `colSpan` | `number` | `—` | See the type and source declaration for this property. |
| `rowSpan` | `number` | `—` | See the type and source declaration for this property. |
| `headers` | `string` | `—` | See the type and source declaration for this property. |
| `scope` | `string` | `—` | See the type and source declaration for this property. |
| `href` | `string` | `—` | See the type and source declaration for this property. |
| `target` | `string` | `—` | See the type and source declaration for this property. |
| `rel` | `string` | `—` | See the type and source declaration for this property. |
| `hrefLang` | `string` | `—` | See the type and source declaration for this property. |
| `download` | `string \| boolean` | `—` | See the type and source declaration for this property. |
| `xmlns` | `string` | `—` | See the type and source declaration for this property. |
| `viewBox` | `string` | `—` | See the type and source declaration for this property. |
| `preserveAspectRatio` | `string` | `—` | See the type and source declaration for this property. |
| `open` | `boolean` | `—` | See the type and source declaration for this property. |
| `scoped` | `boolean` | `—` | See the type and source declaration for this property. |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property. |
| `start` | `number` | `—` | See the type and source declaration for this property. |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property. |
| `on` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `only` | `string[]` | `—` | See the type and source declaration for this property. |
| `css` | `any` | `—` | See the type and source declaration for this property. |
| `onPress` | `any` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `className` | `string` | `—` | See the type and source declaration for this property. |
| `blend` | `boolean` | `—` | See the type and source declaration for this property. |
| `type` | `string` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `style` | `react.CSSProperties` | `—` | See the type and source declaration for this property. |
| `widthHeight` | `string \| number` | `—` | See the type and source declaration for this property. |
| `children` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component. |
| `srcDoc` | `string` | `—` | See the type and source declaration for this property. |
| `sandbox` | `string` | `—` | See the type and source declaration for this property. |
| `to` | `string` | `—` | Destination URL or application route. |
| `keys` | `any[]` | `—` | See the type and source declaration for this property. |
| `sx` | `any` | `—` | See the type and source declaration for this property. |
| `itemStyle` | `any` | `—` | See the type and source declaration for this property. |
| `paddingX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `hoverBackgroundColor` | `string` | `—` | See the type and source declaration for this property. |
| `hover` | `boolean \| Record<string, any>` | `—` | See the type and source declaration for this property. |
| `hoverStyle` | `Record<string, any>` | `—` | See the type and source declaration for this property. |
| `checked` | `boolean` | `—` | See the type and source declaration for this property. |
| `defaultChecked` | `boolean` | `—` | See the type and source declaration for this property. |
| `transition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-transition>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-------: \| :----: \| :----: \| \| **26** \| **16** \| **9** \| **12** \| **10** \| \| 1 _-x-_ \| \| 3.1 _-x-_ \| \| \| |
| `before` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `after` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `theme` | `Partial<Theme>` | `—` | Component-scoped theme override. Remaps `theme-*` tokens used by this component (and its style props) to different color tokens, without affecting the global ThemeProvider. Each value is a color token string (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`). |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `animateOn` | `"View" \| "Mount" \| "Both" \| "Scroll"` `"View"``"Mount"``"Both"``"Scroll"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_visited` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_disabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_enabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_checked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_unchecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_invalid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_valid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_required` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_optional` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_selected` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_target` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_onlyChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_empty` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusVisible` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusWithin` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_placeholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_odd` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_even` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerChecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_before` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_after` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLetter` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLine` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_selection` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_backdrop` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_marker` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitAutofill` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitContactsAutoFillButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitInnerSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitOuterSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitSearchCancelButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozPlaceholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozFocusInner` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `paddingHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `animate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateIn` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateOut` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `shadow` | `number \| boolean \| Shadow` | `—` | Shadow or elevation styling. |
| `WebkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `webkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `safeArea` | `boolean \| "all" \| SafeAreaEdge \| SafeAreaEdge[]` | `—` | `true`/`'all'` = all four edges; or a single edge / array of edges. |
| `safeAreaTop` | `boolean` | `—` | Per-edge opt-in. An explicit boolean wins over `safeArea`/`safeAreaEdges`. |
| `safeAreaBottom` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaLeft` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaRight` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaEdges` | `SafeAreaEdge[]` | `—` | Explicit edge list, merged with `safeArea`. |
| `ignoreSafeArea` | `boolean` | `—` | Force safe area OFF — wins over every other safe-area prop. |
| `safeAreaMode` | `SafeAreaMode` `"margin"``"padding"` | `—` | Apply the inset as padding (default) or margin. |
| `accessibilityLabel` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityLiveRegion` | `"none" \| "polite" \| "assertive"` `"none"``"polite"``"assertive"` | `—` | See the type and source declaration for this property. |
| `accessibilityRole` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityState` | View type `{ busy?: boolean \| null \| undefined; checked?: (boolean \| null \| undefined) \| "mixed"; disabled?: boolean \| null \| undefined; expanded?: boolean \| null \| undefined; grabbed?: boolean \| null \| undefined; hidden?: boolean \| null \| undefined; invalid?: boolean \| null \| undefined; modal?: boolean \| null \| undefined; pressed?: boolean \| null \| undefined; readonly?: boolean \| null \| undefined; required?: boolean \| null \| undefined; selected?: boolean \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessibilityValue` | `{ max?: number \| null \| undefined; min?: number \| null \| undefined; now?: number \| null \| undefined; text?: string \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessible` | `boolean` | `—` | See the type and source declaration for this property. |
| `importantForAccessibility` | `"auto" \| "yes" \| "no" \| "no-hide-descendants"` `"auto"``"yes"``"no"``"no-hide-descendants"` | `—` | See the type and source declaration for this property. |
| `nativeID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `onLayout` | `((e: LayoutEvent) => void)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onResponderEnd` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderGrant` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderMove` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderReject` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderRelease` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderStart` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminate` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminationRequest` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `testID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `dataSet` | `Object \| null` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.