## VRadio

The **VRadio component** serves as a basic radio button, enabling users to select a single option from a set of predefined choices.

When used in conjunction with the VRadioGroup component, it allows for **groupable functionality**, presenting a cohesive set of radio buttons that facilitate user selection from multiple options.

### VRadioGroup:

The **VRadioGroup component** organizes multiple VRadio buttons into a single, manageable group, ensuring that only one selection can be made at a time from the provided options.

:::success

It should not be used independently; it should be within a **VRadioGroup**.

:::

## VSelect

The **VSelect component** is designed for gathering user input from a predefined list of options. This component streamlines the process of data collection.

**Usage Scenario**

* Each item in the array assigned to the **items** prop of the component should have keys named **text** and **value**.
* Assign **text** to the **itemText** prop of the component.
* Assign **value** to the **itemValue** prop of the component.
* If only one value is to be displayed (no separate fields for text and value), **the same value** can be assigned to both keys.

## DocumentViewer

The DocumentViewer component can preview **image (IMG), PDF, and HTML files**.

### Usage Scenarios

Using the DocumentViewer is straightforward as it requires only a source (src) prop and an optional height prop (default is 50px). Once you add the component to your interface, you can use it as shown in the examples below:

**PDF:**

To preview a PDF file, you can define src prop as a **byte64 code** or **a pdf path.**

EKRAN MEVCUT

**Html:**

To preview a HTML file, you can define src prop as a **raw html code** or **a full path of an HTML page**.

EKRAN MEVCUT

**Img:**

DocumentViewer supports the following image types: **jpeg, jpg, gif, png, apng, svg, bmp, ico**

2 kullanım için mobil ekran görüntüsü ve üzerilen qjson eklenmeli (NILAY)

#### Mobile Usage Scenarios

* You can use the **DocumentViewer** component to display long texts such as contracts on mobile.

* When displaying inside a **VDialog**, the component layout should be as follows:

- From outermost to innermost;

- VDialog -> VContainer -> VRow -> VCol -> VCard -> DocumentViewer

EKRAN (MOBIL)