# amperity.design.forms.layout

## components

### section

#### props

* title (optional) - `React.Element`
* description (optional) - `React.Element`
* children

#### What does it do?

Applies spacing between title, description, and children.

Meant to compose `group`s.

### group

#### props

* title (optional) - `React.Element`
* description (optional) - `React.Element`
* children

#### What does it do?

Applies spacing between title, description, and children.

Meant to be a collection of fields (`item`) that relate to the same thing.

### row (working name)

#### props

* children

#### What does it do?

Changes the direction of items to be in columns, instead of each being their own row

### item

#### props

* label
* sub-label
* tooltip
* error
* warning
* ...
* children

#### What does it do?

Spacing & provides a way to wrap input elements with label, sub-label, etc.

## Examples


($ section
   {:title "Settings"
    :description "Blah blah blah"}
   ($ group
      {:title "Performance Troubleshooting"}
      ($ input/number
         {:label (<> "Recorded days" ($ tooltip/help ,,,))} ,,,)
      ($ item
         {:label (<> "Allowed Empty Tables" ($ tooltip/help ,,,))}
         ($ input/select-v2 ,,,))
      ($ row
         ($ input/number {:label "Partition depth"})
         ;; OR
         ($ item
            {:label "Size threshold"}
            ($ input/number ,,,))
         ($ item
            {:label "Parallelism"}
            ($ input/number ,,,))))
   ($ group
      {:title "Improve Stitch Process Speed"}
      ($ input/input-group
         ($ input/input-group-checkbox
            {:label "Skip unified changes"
             :info "Blah blah blah"})
         ($ input/input-group-checkbox
            {:label "Skip scores output"
             :info "Blah blah blah"}))))