> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kiwify.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Visão geral

> Tipos de entrada permitem definir diferentes tipos de configurações nas suas seções de tema.

Tipos de entrada são usados para definir como as configurações aparecem e se comportam no editor de tema. Eles permitem criar uma interface amigável para personalizar suas seções de tema.

## Uso

Tipos de entrada são definidos no array `settings` do seu schema de seção. Cada configuração deve ter uma propriedade `type` que especifica qual tipo de entrada usar.

No exemplo abaixo, definimos uma seção com três tipos de entrada diferentes: uma entrada de texto para o cabeçalho, um grupo de alternância para o layout e um controle deslizante de intervalo para o espaçamento.

<Columns cols={2}>
  <CodeGroup>
    ```json Schema theme={null}
    {
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Hello, world!"
        },
        {
          "type": "select",
          "id": "layout",
          "label": "Layout",
          "options": [
            {
              "value": "full_width",
              "label": "Full width",
              "kiwi_extra": {
                "icon": "fa fa-arrows-alt-h"
              }
            },
            {
              "value": "contained",
              "label": "Contained",
              "kiwi_extra": {
                "icon": "fa fa-compress"
              }
            }
          ],
          "default": "full_width",
          "kiwi_extra": {
            "labeled": true
          }
        },
        {
          "type": "range",
          "id": "padding",
          "min": 0,
          "max": 100,
          "step": 5,
          "unit": "px",
          "label": "Padding",
          "default": 15
        }
      ]
    }
    ```
  </CodeGroup>

  <div class="code-group p-0.5 mt-5 mb-8 flex flex-col not-prose relative overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 bg-gray-50 dark:bg-white/5 dark:codeblock-dark text-gray-950 dark:text-gray-50 codeblock-light">
    <div class="flex items-center justify-between gap-2 relative px-2.5">
      <div role="tablist" aria-orientation="horizontal" class="flex-1 min-w-0 text-xs leading-6 rounded-tl-xl gap-1 flex overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20 active:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25 dark:active:scrollbar-thumb-white/25" tabindex="0" style={{outline: "none"}}>
        <button type="button" role="tab" aria-selected="true" aria-controls="image-tab" data-state="inactive" id="image-tab-trigger" class="group flex items-center relative gap-1.5 py-1 pb-1.5 outline-none whitespace-nowrap font-medium text-primary dark:text-primary-light" tabindex="-1">
          <div class="flex items-center gap-1.5 px-1.5 rounded-lg z-10">
            Result

            <div class="absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-primary dark:bg-primary-light" />
          </div>
        </button>
      </div>

      <div class="flex items-center justify-end shrink-0 gap-1.5" />
    </div>

    <div class="flex flex-1 overflow-hidden">
      <div role="tabpanel" aria-labelledby="image-tab-trigger" id="image-tab" tabindex="0" class="w-full min-w-full max-w-full h-full max-h-full">
        <div class="w-0 min-w-full max-w-full py-3.5 px-4 h-full dark:bg-codeblock relative text-sm leading-6 children:!my-0 children:!shadow-none children:!bg-transparent transition-[height] duration-300 ease-in-out [&_*]:ring-0 [&_*]:outline-none [&_*]:focus:ring-0 [&_*]:focus:outline-none [&_pre>code]:pr-[3rem] [&_pre>code>span.line-highlight]:min-w-[calc(100%+3rem)] [&_pre>code>span.line-diff]:min-w-[calc(100%+3rem)] rounded-2xl bg-white overflow-auto overflow-x-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20 active:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25 dark:active:scrollbar-thumb-white/25" style={{"font-variant-ligatures": "none", "height": "100%"}}>
          <div class="font-mono whitespace-pre flex-none text-sm h-full leading-6">
            <img src="https://mintcdn.com/kiwify-81/eqGeDYA02A7icNcw/images/members-area/schema-example.webp?fit=max&auto=format&n=eqGeDYA02A7icNcw&q=85&s=94b7139e16900a33ad021a7b108d1fa8" alt="Resulting fields in editor" width="762" height="598" data-path="images/members-area/schema-example.webp" />
          </div>
        </div>
      </div>
    </div>
  </div>
</Columns>

Confira documentação detalhada para cada tipo de entrada:

<CardGroup cols={3}>
  <Card title="Texto" icon="text" href="/members-area/reference/schema/fields/settings/input-types/text">
    Campo de entrada de texto básico
  </Card>

  <Card title="Range" icon="sliders" href="/members-area/reference/schema/fields/settings/input-types/range">
    Selecione um valor numérico dentro de um intervalo
  </Card>

  <Card title="Select" icon="border-all" href="/members-area/reference/schema/fields/settings/input-types/select">
    Grupo de botões de alternância para selecionar uma opção
  </Card>

  <Card title="Checkbox" icon="square-check" href="/members-area/reference/schema/fields/settings/input-types/checkbox">
    Para representar valores verdadeiro/falso
  </Card>

  <Card title="Seletor de Imagem" icon="image" href="/members-area/reference/schema/fields/settings/input-types/image-picker">
    Entradas de imagem
  </Card>

  <Card title="Curso" icon="book" href="/members-area/reference/schema/fields/settings/input-types/course">
    Selecione um curso da área de membros
  </Card>

  <Card title="Módulo" icon="files" href="/members-area/reference/schema/fields/settings/input-types/module">
    Selecione um módulo da área de membros
  </Card>
</CardGroup>

## Propriedades Comuns

Todos os tipos de entrada compartilham essas propriedades comuns:

<ParamField path="type" type="string" required>
  O tipo de entrada a usar. Veja tipos disponíveis acima.
</ParamField>

<ParamField path="id" type="string" required>
  Identificador único para a configuração. Deve ser único dentro da seção.
</ParamField>

<ParamField path="label" type="string" required>
  O rótulo mostrado no editor de tema.
</ParamField>

<ParamField path="default" type="any">
  Valor padrão para a configuração. O tipo depende do tipo de entrada.
</ParamField>

<ParamField path="info" type="string">
  Informações adicionais mostradas abaixo da entrada.
</ParamField>

<ParamField path="kiwi_extra" type="object">
  Propriedades adicionais para a configuração. Atualmente suportadas:

  * `hidden`: Valor booleano, indica se esta configuração deve ser exibida na barra de configuração do Editor de Tema
  * `validations`: Aplica validações a esta configuração antes de salvar. Atualmente suportadas:
    * `required`: Valor booleano. Se verdadeiro, esta configuração deve ser preenchida com um valor válido.
</ParamField>
