# Setting List Element

The Settings List is a ready-to-use component for creating profile and settings screens. It organizes items into structured sections, each with customizable icons, titles, and links — just like a real app settings page.

***

{% tabs %}
{% tab title="Custom Tab" %}

## <mark style="color:green;">Add Sections & Items</mark>

You’ll start by creating sections. Each section contains multiple items.

#### ➕ Add Section

* Section Title – Like a header (e.g., “My Information”)
* Add Section Items – Each section can include rows like “Profile”, “My Orders”, “Help & Support”

#### ➕ Add Section Item Fields

Each item includes:

* Title – e.g., “Rewards”
* Subtitle – Optional small text under the title
* Icon – Upload a PNG/JPG icon
* Click Action – Set a URL or screen link (e.g., twinr://profile)
* Visibility – Guest, Logged-in, or All
  {% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Customize Appearance</mark>

### 🎨 Section Design

* Background Color – Set background (solid or semi-transparent)
* Corner Radius – Adjust section shape
* Spacing Between Items – Customize vertical padding

### 🏷 Section Title

* Text Style (e.g., Heading Small)
* Color
* Title Position:
  * Over the Section
  * Under the Section

### 🧱 Section Items

**Icon Size**

* Adjust height and width of the icons

**Title & Subtitle**

* Customize text style and color

#### Arrow

Used to show a navigation arrow at the end of each item (like “>” in native iOS/Android).

* Upload Icon – PNG/JPG only
* Height / Width – Adjust size to match row height

#### Section Item Divider

Adds a line between each row.

* Height – Thickness of the divider (e.g., 0.25px)
* Color – Match with app theme or tone

### 📏 Margin

Add spacing around the divider:

* Adjust Top, Bottom, Left, and Right margins
* Use linked controls (🔗) to keep spacing consistent

### 👁️ Visibility

Available for the entire settings list block:

* Platform: Android, iOS, PWA
* Device: Mobile / Tablet
* User: Guest / Logged-in
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">✅ Use Case Examples</mark>

| My Information  | Profile, My Orders, Rewards |
| --------------- | --------------------------- |
| Support & Legal | FAQ, Terms, Contact Us      |

***

## 📱 <mark style="color:green;">Result</mark>

A polished native-like settings screen with:

* Grouped sections
* Icons + labels
* Optional arrows
* Clean dividers

<figure><img src="/files/RRI8qn0lmhZUgE2x3s7E" alt="" width="309"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/native-screen/setting-list-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.