UI Controls

Important:
Using the old UI-lib? Contact your account manager to switch over to our new UI-lib. Learn more.
Button
Button

Use buttons for CTAs in your settings panel.

Here are a few examples of when to use buttons:

  • Upgrade button for premium apps: Add an upgrade action link (button with class btn-upgrade-nav) to your app’s menu so that users can get to your app’s billing page.
  • Users need to connect an account to use your app: Add a CTA button (with class btn-confirm-primary) in your Main tab and help users set up their account.
    Download the design files – they’ll help you implement the connect account flow.
  • Your app has add-ons: Add an action link (button with class btn-nav) to your app’s menu so that users can install your app’s add-ons.
    Download the design files – they’ll help you implement the Add-ons modal.

Note: Are you adding two buttons, one above the other? Use the same size for both buttons (if the buttons are different lengths, it won’t look good).

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

 

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription
Checkbox
Checkbox

The checkbox UI control is similar to a native HTML checkbox, but with the Wix style.

Example for JSX:

 

Options

All properties are optional.

PropertyTypeDefaultDescription

 

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

We recommend using the wix-param property – it allows you to save the value the user selects within the Wix site (instead of saving it on your database).

Need a refresher on how to use wix-param? Check out our getting started guide.

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

 

Example:

 

Options

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Checkbox with Text Input
Checkbox with Text Input

Giving users the option to show/hide text in your app? If the text fields are short and are all related to each other, you can make it easy for them to manage these texts in one place.

Next to your show/hide checkboxes, allow users to customize the text.

This UI control isn’t integrated into our UI-lib, but we’ve provided PSDs and style guides to help you get started.

Download the design files
Color Picker with Opacity
Color Picker with Opacity

This color picker allows users to change the color and opacity of elements in your app – like the background, border, etc. (For text elements, use the color picker without opacity instead.)

Before you set up the color picker, choose a starting color scheme so that your app’s colors integrate seamlessly with the site’s color palette. You’ll then set this scheme both in the color picker and in the app itself.

When a user changes the color, use wix-param to save this value in the site instead of on your database. (Need a refresher on wix-param? Check out our getting started guide.)

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Color Picker
Color Picker

This color picker allows users to change your app’s color. Before you set up the color picker, choose a starting color scheme so that your app’s colors integrate seamlessly with the site’s color palette. This means that your app will look great when users install it.

When a user customizes your app’s color, use wix-param to save this value in the site instead of on your database. Need a refresher on how to use wix-param? Check out our getting started guide.

Example for JSX:

 

Options:

All properties are optional.

NameTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

We recommend using the wix-param property – it allows you to save the value the user selects within the Wix site (instead of saving it on your database).

Need a refresher on how to use wix-param? Check out our getting started guide.

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Date Picker
Date Picker

When users need to select dates in the App Settings panel, use this date picker design so that your calendar has the Wix look and feel.

This UI control isn’t integrated into our UI-lib, but we’ve provided PSDs and style guides to help you get started.

Download the design files
Divider
Divider

Use this HTML divider to separate UI controls in your panel:

  • Long divider – to separate settings that aren’t directly related to each other
  • Short divider  – to separate settings that are directly related to each other

Example for JSX:

 

Property:

PropertyTypeDescription

Example:

 

Property:

PropertyTypeDescription

Example:

 

Property:

PropertyTypeDescription
Dock
Dock

The dock UI control allows users to position a fixed-position widget. For example, users can position the app so that it appears on the bottom-left corner of the editor and live site.

The position will be saved inside the Wix site, so you don’t need to listen to an onChange event.

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Draggable list
Draggable List

Make it easy for users to order elements in a list with this draggable list design.

This UI control isn’t yet integrated into our UI-lib (coming soon). For now, we’ve provided PSDs and style guides to help you get started.

Download the design files
Drilldown List
Drilldown List

Drill down lists help keep your tabs organized. If each section in a tab has more than 4-5 settings, create categories and allow users to drill down to customize the settings. (Learn more about how to organize the tab.)

This UI control isn’t integrated into our UI-lib, but we’ve provided PSDs and style guides to help you get started.

Download the design files
Dropdown
Dropdown

The dropdown list allows users to choose one out of many items in a list. We’ll add a scrollbar to the list when needed, so that users can easily see all items in the list.

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

We recommend using the wix-param property – it allows you to save the value the user selects within the Wix site (instead of saving it on your database).

Need a refresher on how to use wix-param? Check out our getting started guide.

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Font and Color Picker
Font and Color Picker

The font and color picker allows users to change the color and font of text in your app. This UI control opens the font picker and the color picker (without opacity).

Before you set up the font and color picker, choose a starting color scheme and a starting font scheme so that your app integrates seamlessly with the site’s fonts and colors. This means that your app will look great when users install it.

When a user customizes your app’s font and color, use wix-param to save these values in the site instead of on your database. Need a refresher on how to use wix-param? Check out our getting started guide.

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

Store the color and font in the user’s site instead of on your database. For more information about wix-param, check out our getting started guide.

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Font Picker
Font Picker

The font picker allows users to change your app’s font. Before you set up the font picker, choose a starting font scheme so that your app’s font integrates seamlessly with the site’s font. This means that your app will look great when users install it.

When a user changes the font, use wix-param to save this value in the site instead of on your database. (Need a refresher on wix-param? Check out our getting started guide.)

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Image Preview
Image Preview

The image preview UI control allows users to add an image to your app. Users can choose an image from their Wix media gallery or upload a new one.  

Example for JSX:

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Panel Tabs
Panel Tabs
The panel tabs UI control is a container for the tabs and action links in your app’s navigation menu.
Our starter template already has the most common tabs, but you can add more tabs if needed.

Example for JSX:

Options:

Add these properties in the parent UI control – panelTabs. All properties are optional.

PropertyTypeDefaultDescription

Add an element for each tab, with these properties:

NameTypeDescription

Example:

 

Options:

In the parent UI control – panelTabs – nest these properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Add a <div> element for each tab, with these properties:

NameTypeDescription

Functions:

NameDescription

Example:

 

Options:

In the parent UI control – panelTabs – nest this attribute within the <wix-control> tag.

AttributeTypeDescription

In the parent UI control – panelTabs – nest these properties within the  <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Add a <div> element for each tab, with these properties:

NameTypeDescription

Functions:

Nest this function within a <script> tag, inside a $scope object.

NameDescription

Nest these functions within a <script> tag, inside a $scope.refs object. Don’t use function pointers – instead, add the ref attribute in the wix-control tag, as explained above.

NameDescription
Preloader
Preloader

Use our preloader UI control to show users that your app is loading something.

We’ll position it in the center of the iframe by default. You can change the position by nesting the component inside a <div> and setting the position property.

Example for JSX:

 

Example:

 

Example:

 

Radio Buttons
Radio Buttons

The radio buttons UI control allows users to choose one out of a few possible options – just like native HTML radio buttons, but with the Wix style. (If you’re giving more than 3 options, use a dropdown list instead.)

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

We recommend using the wix-param property – it allows you to save the value the user selects within the Wix site (instead of saving it on your database).

Need a refresher on how to use wix-param? Check out our getting started guide.

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Section Divider
Section Divider

Use section dividers to separate or group settings together within a tab.

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription
Slider
Slider

The slider allows users to choose a number by dragging a handle.

Example for JSX:

 

Options:

All properties are optional.

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Wix-param:

We recommend using the wix-param property – it allows you to save the value the user selects within the Wix site (instead of saving it on your database).

Need a refresher on how to use wix-param? Check out our getting started guide.

PropertyTypeDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example:

 

Options:

Nest the properties within the <wix-control> tag, inside props. All properties are optional.

PropertyTypeDefaultDescription

Function:

Nest the function within a <script> tag, inside a $scope object.

NameDescription
Symbol
Symbol

We have a collection of icons for you to use in your settings panel. They’re the same icons we use in the Wix editor, so they’ll help your app feel native to our platform.

Have a premium app? When you use our premium icon, download and use these design files to help you get started.

Example for JSX:

 

Property:

PropertyTypeDescription

Example:

 

Property:

PropertyTypeDescription

Example:

 

Property:

Nest the property within the <wix-control> tag, inside props.

PropertyTypeDescription
Text Input
Text Input

This text input is just like a native HTML input element, but with the Wix look and feel. (We also have a text input field with a button.)

You can validate the user’s input by passing a validation function.

Example for JSX:

Options:

All properties are optional.  

PropertyTypeDefaultDescription

Example:

 

Options:

Nest all properties within wix-options. All properties are optional.

PropertyTypeDefaultDescription

Functions:

Nest functions inside a <script> tag.

NameDescription

Example: