---
~~Title: Widgets Programming Guide~~
---

# Widgets Programming Guide #

The Elementary library is a simple toolkit. It provides several widgets than can be used to build your application user interface. Widgets allow you to create applications without having to reinvent basic objects, such as buttons, lists, or text boxes. Widgets can also provide feedback to your application whenever a user interacts with them. In this guide you'll learn about the basics of Elementary, as well as some concepts of the Elementary configuration framework. You'll also discover some commonly used Widgets.


## Elementary Basics ##

[In this section](/develop/legacy/program_guide/widgets/basics), you'll learn how widgets are built in a hierarchical manner. You will also discover how to build a basic Elementary application and the various callbacks that can be registered for Widgets.

## Elementary Configuration ##

Elementary can be configured using profiles. [This section details some configuration items](/develop/legacy/program_guide/widgets/config) that can be modified to tweak the use of Elementary.

## Widgets ##

### Background ###

[The background widget](/develop/legacy/program_guide/widgets/background) can be used to set a solid background for a window or container object. It works like an image but has some background specific properties such as setting to tiled, centered, scaled, or stretched.

### Button ###

[The button widget](/develop/legacy/program_guide/widgets/button) is a simple push button. It's composed of a label icon and icon object. It also has an auto-repeat feature.  The Check Widget toggles a Boolean value (true or false).

### Check ###

[The Check widget](/develop/legacy/program_guide/widgets/check) is a simple check box. It is similar to the radio widget, except that it does not work as a group. It toggles the value of a boolean between true and false.

### Colorselector ###

[The Colorselector widget](https://www.enlightenment.org/develop/legacy/program_guide/widgets/colorselector) offers the user a color palette. It has different modes, each of which support different color configuration.

### Ctxpopup ###

[The Ctxpopup widget](/develop/legacy/program_guide/widgets/ctxpopup) is a contextual popup which can display a list of items.

### Datetime ###

[The Datetime widget](/develop/legacy/program_guide/widgets/datetime) can display and input date and time values.

### Entry ###

[The Entry widget](develop/legacy/program_guide/widgets/entry) is a box into which a user can enter text.

### Flip ###

[The Flip widget](/develop/legacy/program_guide/widgets/flip) can hold two Evas objects. This allows the user to 'flip' between these objects using a variety of predefined animations.

### GLView ###

[The GLView widget](https://www.enlightenment.org/develop/legacy/program_guide/widgets/glview) can render OpenGL in an Elementary object, hiding EvasGL complexity.

### Icon ###

[The Icon widget](/develop/legacy/program_guide/widgets/icon) is based on the Image Widget and is used to display images in icon format.

### Image ###

[The Image widget](/develop/legacy/program_guide/widgets/image) can load and display images from a file or virtual memory.

### Index ###

[The Index widget](/develop/legacy/program_guide/widgets/index) provides an index for fast access to other *User Interface (UI)* items.

### Label ###

[The Label widget](/develop/legacy/program_guide/widgets/label) displays text with simple *Hypertext Markup Language (HTML)*-like markup. List  It offers a very simple ways to manage a small number of items. If you need to manage a larger amount use the Genlist Widget instead.

### List ###

[The List widget](/develop/legacy/program_guide/widgets/list) is a very simple type of a list widget. It is not to be used to manage a lot of items. For that, genlists are a better option. The list items can contain a text and two contents (“start”, and “end”).

### Map ###

[The Map widget](develop/legacy/program_guide/widgets/map) can display a geographic map. The default map data is provided by the [OpenStreetMap project.](http://www.openstreetmap.org/)

### Notify ###

[The Notify widget](/develop/legacy/program_guide/widgets/notify) displays a container in a specific region of the parent object. It can also receive some content and automatically hide after a certain amount of time.

### Panel ###

[The Panel widget](/develop/legacy/program_guide/widgets/panel) is an animated object which can contain child objects. It can be expanded or contracted by clicking the button on its edge.

### Photo ###

[The Photo widget](/develop/legacy/program_guide/widgets/photo) can be used to display a photo, such as a contact image. If no photo is set, the widget displays a person icon to show that it is a photo placeholder.

### Photocam ###

[The Photocam widget](https://www.enlightenment.org/develop/legacy/program_guide/widgets/photocam) is designed to display high-resolution photos taken with a digital camera. It allows you to quickly load, zoom and resize photos. The widget is optimized for JPEG images and has a low memory footprint.

### Plug ###

[The plug widget](/develop/legacy/program_guide/widgets/plug) allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary widget.

### Popup ###

[The Popup widget](develop/legacy/program_guide/widgets/popup) shows a pop-up area that can contain title, content and action sections.

### Progressbar ###

[The Progressbar widget](/develop/legacy/program_guide/widgets/progressbar) can be used to display the progress of a given job.

### Radio ###

[The Radio widget](/develop/legacy/program_guide/widgets/radio) can display multiple options but Users can only select one. The Widget is composed of an indicator (selected/unselected), an optional icon and/or label. It's usually grouped with 2 or more other radio widgets but can be used alone.

### Segmentcontrol ###

[The Segmentcontrol widget](/develop/legacy/program_guide/widgets/segmentcontrol) consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon. 

### Slider ###

[The Slider widget](/develop/legacy/program_guide/widgets/segmentcontrol) is a draggable bar which is used to select a value from a specified range.

### Spinner ###

[The Spinner widget](/develop/legacy/program_guide/widgets/spinner) enables the user to increase or decrease a numeric value using arrow buttons.

### Toolbar ###

[The Toolbar widget](/develop/legacy/program_guide/widgets/toolbar) is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.

### Tooltip ###

[The Tooltip widget](develop/legacy/program_guide/widgets/tooltips) is a smart object used to show tips or information about a parent object. It appears when the mouse hovers over the parent object.

### Transit ###

The transit widget can apply several transition effects to an Evas object, such as transformations and rotations. The use of the transit widget is documented in the [Creating Animations and Effects guide](/tutorial/effects_tutorial).

### Win ###

[The Win widget](/develop/legacy/program_guide/widgets/win) is the root window widget. It allows you to create and store content inside it, so is used by almost every application. Win is handled by the Window Manager.

## Further Reading ##

[Beckground API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Bg.html)
:    The functions that allow you to manage the Background widget

[Button API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Button.html)
:    The functions that allow you to manage the Button widget

[Check API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Check.html)
:    The functions that allow you to manage the Check widget

[Colorselector API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Colorselector.html)
:    The functions that allow you to manage the Colorselector widget

[Ctxpopup API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Ctxpopup.html)
:    The functions that allow you to manage the Ctxpopup widget

[Datetime API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Datetime.html)
:    The functions that allow you to manage the Datetime widget

[Entry API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Entry.html)
:    The functions that allow you to manage the Entry widget

[Flip API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Flip.html)
:    The functions that allow you to manage the Flip widget

[GLView API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__GLView.html)
:    The functions that allow you to manage the GLView widget

[Icon API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Icon.html)
:    The functions that allow you to manage the Icon widget

[Image API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Image.html)
:    The functions that allow you to manage the Image widget

[Index API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Index.html)
:    The functions that allow you to manage the Index widget

[Label API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Label.html)
:    The functions that allow you to manage the Label widget

[List API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__List.html)
:    The functions that allow you to manage the List widget

[Map API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Map.html)
:    The functions that allow you to manage the Map widget

[Notify API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Notify.html)
:    The functions that allow you to manage the Notify widget

[Photo API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Photo.html)
:    The functions that allow you to manage the Photo widget

[Photocam API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Photocam.html)
:    The functions that allow you to manage the Photocam widget

[Panel API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Panel.html)
:    The functions that allow you to manage the Panel widget

[Plug API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Plug.html)
:    The functions that allow you to manage the Plug widget

[Popup API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Popup.html)
:    The functions that allow you to manage the Popup widget

[Progressbar API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Progressbar.html)
:    The functions that allow you to manage the Progressbar widget

[Radio API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Radio.html)
:    The functions that allow you to manage the Radio widget

[SegmentControl API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__SegmentControl.html)
:    The functions that allow you to manage the SegmentControl widget

[Slider API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Slider.html)
:    The functions that allow you to manage the Slider widget

[Spinner API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Spinner.html)
:    The functions that allow you to manage the Spinner widget

[Toolbar API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Toolbar.html)
:    The functions that allow you to manage the Toolbar widget

[Tooltip API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Tooltips.html)
:    The functions that allow you to manage the Tooltip widget

[Transit API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Transit.html)
:    The functions that allow you to manage the Transit widget

[Win API](https://build.enlightenment.org/job/nightly_elm_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/group__Win.html)
:    The functions that allow you to manage the Win widget