# Elements overview

> Every element you can drag onto an NGX View Builder canvas, grouped by purpose: inputs, choices, dates, tables, charts, layout and content.

Source: https://ngxviewbuilder.io/creators/elements/

Elements are the building blocks of every view. This page is the index; each group has its own page with per-element details.

## Which element do I need?

| I need… | Use | Group |
| --- | --- | --- |
| A short text answer | Text | [Text & number inputs](https://ngxviewbuilder.io/creators/elements/inputs) |
| A long text answer | Textarea | [Text & number inputs](https://ngxviewbuilder.io/creators/elements/inputs) |
| A number | Number, Number stepper, Slider | [Text & number inputs](https://ngxviewbuilder.io/creators/elements/inputs) |
| A phone number | Phone input | [Text & number inputs](https://ngxviewbuilder.io/creators/elements/inputs) |
| A date | Datepicker | [Date & time](https://ngxviewbuilder.io/creators/elements/date-time) |
| A period (from/to) | Date range | [Date & time](https://ngxviewbuilder.io/creators/elements/date-time) |
| A time | Time picker | [Date & time](https://ngxviewbuilder.io/creators/elements/date-time) |
| One choice from a list | Select, Radio, Select button | [Choice inputs](https://ngxviewbuilder.io/creators/elements/choices) |
| Many choices from a list | Multi-select, Checkbox group, List box | [Choice inputs](https://ngxviewbuilder.io/creators/elements/choices) |
| Yes/no | Single checkbox, Toggle switch | [Choice inputs](https://ngxviewbuilder.io/creators/elements/choices) |
| Search-as-you-type choice | Autocomplete | [Choice inputs](https://ngxviewbuilder.io/creators/elements/choices) |
| A clickable action | Button | [Buttons & actions](https://ngxviewbuilder.io/creators/elements/buttons) |
| Group fields visually | Panel, Tabs, Accordion | [Containers](https://ngxviewbuilder.io/creators/elements/containers) |
| Several fields saved as one object (an address, a contact) | Object panel | [Containers](https://ngxviewbuilder.io/creators/elements/containers) |
| Repeatable entries (0 to n) | Dynamic panel, Dynamic table | [Containers](https://ngxviewbuilder.io/creators/elements/containers) / [Tables](https://ngxviewbuilder.io/creators/elements/tables) |
| A modal window | Dialog | [Containers](https://ngxviewbuilder.io/creators/elements/containers) |
| Read-only data rows | Table | [Tables & lists](https://ngxviewbuilder.io/creators/elements/tables) |
| Card-style records | List grid | [Tables & lists](https://ngxviewbuilder.io/creators/elements/tables) |
| Formatted text / HTML | Rich text, Custom HTML | [Content & media](https://ngxviewbuilder.io/creators/elements/content) |
| Pictures / video / embeds | Image, Video, Iframe | [Content & media](https://ngxviewbuilder.io/creators/elements/content) |
| A chart | Chart | [Content & media](https://ngxviewbuilder.io/creators/elements/content) |
| Status labels & KPIs | Badge, Stats card, Message card | [Feedback & status](https://ngxviewbuilder.io/creators/elements/feedback) |
| Progress indication | Progress bar, Progress flow | [Feedback & status](https://ngxviewbuilder.io/creators/elements/feedback) |
| File attachments | File upload | [Special inputs](https://ngxviewbuilder.io/creators/elements/special) |
| A handwritten signature | Signature pad | [Special inputs](https://ngxviewbuilder.io/creators/elements/special) |

## Value-producing vs. presentational

**Value-producing elements** (inputs, choices, editable tables) write into the form data under their `name`. Inside an [Object panel](https://ngxviewbuilder.io/creators/elements/containers#object-panel-objectpanel) they write under the panel's name instead, e.g. `address.city`. **Presentational elements** (text, image, divider, badge…) only display; they add nothing to the submitted data.

## Every element shares

Regardless of type, elements share the [common properties](https://ngxviewbuilder.io/creators/properties): name, label, responsive widths, restrictions, logic conditions, validators (for inputs), and events. The group pages only describe what is *specific* to each element.