Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions content/guides/01.data-model/3.interfaces.md
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,49 @@ Radio button input that allows users to select a single value from multiple choi
| Choices | Options for the radio buttons. Each option contains text that is displayed to the user and a value that is stored. |
| Allow Other | Allow user to enter custom values other than preset values. |

### Card Select

![A Card Select field with three cards, each with an icon, label, and description. The Video card is selected.](/img/3d98e798-d5e4-4aee-92bc-e6700ebc14fa.png)

Select a single value from a grid of cards. Each card shows a label, an optional description, and an icon or image.

| Configuration | Options |
| ------------- | ---------------------------------------------------------------------------------------------------------- |
| Types | `String`, `Integer`, `Big Integer`, `Float` |
| Choices | Options for the cards. Each choice contains text that is displayed to the user and a value that is stored. |
| Card Size | Size of each card. `Small`, `Medium`, or `Large`. Defaults to `Medium`. |

Each choice has further configuration options.

| Configuration | Options |
| ------------- | --------------------------------------------------------------------------------------------------------- |
| Text | Label shown on the card. |
| Value | Value stored when the card is selected. |
| Description | Short text shown below the label. |
| Icon Type | Show an `Icon` or an `Image` on the card. Defaults to `Icon`. |
| Icon | Icon shown on the card when **Icon Type** is `Icon`. |
| Image | Image shown on the card when **Icon Type** is `Image`. Upload a file or select one from the file library. |

When there are more than ten choices, a search input appears above the cards to filter them by label.

For long lists of around 20 or more choices, use [Dropdown](#dropdown) or [Dropdown (Multiple)](#dropdown-multiple) instead to keep the form compact.

### Card Select (Multiple)

![A Card Select (Multiple) field with three cards. The Design and Development cards are selected.](/img/e958abad-e25d-40cf-838b-3db81aa8801f.png)

Select multiple values from a grid of cards.

| Configuration | Options |
| ------------- | ---------------------------------------------------------------------------------------------------------- |
| Types | `JSON`, `CSV` |
| Choices | Options for the cards. Each choice contains text that is displayed to the user and a value that is stored. |
| Card Size | Size of each card. `Small`, `Medium`, or `Large`. Defaults to `Medium`. |

Choices use the same options as [Card Select](#card-select). The search input also appears when there are more than ten choices.

To select cards with the keyboard, use the arrow keys to move focus between cards and press **Space** to toggle the focused card. Press **Tab** to move focus out of the group.

## Relational

### File
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading