Property Reference

Brand colors are color variables created with the explicit purpose of creating a color palette for an app. Any color that plays a role in company branding should be configured here. By default, Nintex provides a few colors and color palettes, but any default can be changed, or new colors can be created, to reflect a company's colors.

Properties

• Name: The name of the variable.

Note:  Naming colors is an important step in building a design system. Check out Naming Best Practices before starting to create color variables.

• Color: The hexadecimal value of that represents the base color of the variable. The color property accepts hex, rgb, and hsl values as input. Clicking the color property field opens a swatch editor which allows the user to select a color by physically adjusting, hue, tint, base, and opacity.

Important:  RGB values expressed in functional notation, rgba(), are not supported. rgba() formatted values can be entered into the text box for Color and will work at runtime, however, creating Darker variants and Lighter variants based on rgba() functional notation will break the design system file. To un-break the design system file, change the Color value to it's hexidecimal equivalent.

• Variants: Lighter and darker variants of the base color that may be selected wherever the variable is used. Variants can be added with the Add button, and then entering a value to lighten/shade the base color by. Generally, web designers use (+/-) 20, 40, 60, and 80 percent tint and shade values of the base color to make a unified color palette.

Functional color variables are created with the explicit purpose of assigning a brand color to a functional name–for example, assigning brand color Nintex Apps blue to a Font Color variable. This allows for clarity when styling components. of searching for the correct shade of Nintex Apps Blue in a color list when customizing a font, simply apply the Font Color variable.

Properties

• Name: The name of the variable.

Note:  Naming colors is one of the more important steps of building a design system. Check out Naming Best Practices before starting to create color variables.

• Brand color: The brand color you wish to assign to a new functional name.

Borders surround an element, separating it from other elements.

Properties

• Border Radius: Rounds the corners of the element border.
• Border Size: Sets the thickness of the element border.
• Border Style: Changes the border from the default, solid style to dashed or dotted.

Opacity sets the transparency level of an element. A higher opacity level means an element will be less transparent. A lower opacity level means an element will be more transparent.

Properties

• Name: The name of the variable.
• Opacity: Sets the transparency level of the variable on a range from 0% to 100% where 0% equals complete transparency and 100% no transparency.

Gives an element a shadow effect around its frame.

Properties

• Name: The name of the variable.

• Shadow:

  • X: Sets the shadow to display on the X axis, or to the right of the element on which it's applied.
  • Y: Sets the shadow to display on the Y axis, or on the bottom of the element on which it's applied.
  • Blur: Increases or decreases the blurriness on the applied shadow.
  • Spread: Specifies how far the applied shadow is cast off the element.
  • Color: Sets the color of the shadow. Defaults to black.
  • Inset: Applies the shadow to the inside of the element, giving the element an effect of depth.

Determines how much space is between elements using custom size values. By default, spacing variables are set to Nintex Apps standards.

Properties

• Base Value: The foundation value for all DSS spacing options. Builders can choose px or rem as the base measure and the spacing values will auto adjust if the base value is modified:

• Spacing Increments: Represents the standard, editable spacing increments used in the DSS. To add a new increment, click add Add, then name the increment and set the spacing.

  • Extra Small: Default value: 0.5.
  • Small: Default value: 1.
  • Reduced: Default value: 1.5.
  • Regular: Default value: 2.
  • Increased: Default value: 3.
  • Large: Default value: 4.
  • Extra Large: Default value: 5.
  • Huge: Default value: 6.

The properties that allow customization to the color, size, spacing, font, and shape of text.

Properties

• Font Family: Specifies which particular font face is used for text.

  • Font: The primary font face that will be applied whenever text is used in a component or element.
  • Fallback Font: The alternate text that displays if a browser doesn't support the primary font.

• Font Size: Specifies the size of the font.

  • Name: The Name of the component or element.
  • Font Size

• Font Weight: Specifies the boldness of the font.

  • Name: The Name of the component or element.
  • Font weight

• Line Height: Specifies how many pixels separate each line.

  • Name: The Name of the component or element.
  • Line Height

• Preview with...: Preview the component with common configurations available within the Page Designer. Examples include:

  • For the Filter Set, preview with horizontal or vertical filters.
  • For the Button Group, preview as detached buttons, attached buttons, a combo button, a menu button, an icon-only button, a warning button.
  • For the Slider, preview as a single value or a range.
  • and so on ...

• Name: The specific name of the component or element variable.

• Elements: A list of components and subcomponents that make up the selected component. These components and subcomponents often use style variants (created and defined apart from the selected component) that are located within the component or subcomponet's own listing.

• Change mode icon: Sets color and spacing for the icon used to shift from read to edit mode.

• Font family: Specifies which particular font face is used when rendering text. Font family values are based on available typography variables.

• [Element] Font size: Changes the text size within the specified element. Font size values are based on available typography variables.

• [Element] Font weight: Specifies the boldness of the font. Font weight values are based on available typography variables.

• [Element] Color / Text color / Font color: Sets the color of the text in the specified element. Color values are based on available brand color or functional color variables

• [Element] Icon color: Changes the color of the indicated icon.

• [Element] Icon size: Sets the size of the indicated icon.

• Justify content: Aligns content items (either text or components/subcomponents) within the component along a main axis.

  • Flex start: Aligns content items to the start of the component.
  • Flex end: Algns content items to the end of the component.
  • Center: Aligns content items toward the center line of the component.
  • Space between: Evenly spaces content items out; the spacing between items is the same size. However, there is no spacing between items and the "start" or "end" of the component.
  • Space around: Evenly spaces content items out; the spacing between items is the same size. There is spacing between items and the "start" or "end" of the component; the size of this space equals half the length of the space between items.
  • Space evenly: Evenly spaces content items out. All instances of spacing (between individual items; between items and the "start" or "end" of the component) are the same size.

• Letter spacing: Determines the spacing between each text character.

• Text align: Determines how the day labels will be aligned:

  • Left
  • Center
  • RightAlign

• Text decoration: Specifies whether the text should be underlined or strikethrough.

• Text transform: Specifies whether the text should be upper or lower case.

• [Element] Background color / Background: Sets the background color of the element. Background color values are based on available brand color or functional color variables.

• [Element] Border: Border has four configurable properties, Top, Right, Bottom, and Left. Each border property has the following sub-properties:

  • Size: The thickness of the border. Size values are based on available border size variables.
  • Style: Changes border from the default solid style to dashed or dotted.
  • Color: The color of the border. Color values are based on available color variables.

• Border radius: Rounds the corners of an element if a border is applied. Border radius has four configuration properties that can be set individually: Top, Right, Bottom, and Left. Values are based on available border variables.

• Box shadow: Gives a shadow effect to the frame of the element to which it is applied. Box shadow values are based on available shadows variables.

• More Actions Button Color: Sets the color of the text in the More Actions button. Color values are based on available brand color or functional color variables.

• Opacity: Sets the transparency level of an element. Opacity values are based on available opacity variables.

• Shadow: Places a shadow effect on the element to which it is applied.

• [Element] Size: Sets the size of the indicated element.

Color options

Each color property can be assigned functional / brand color variables, as well as the following three options:

• Unassigned/Inherit: Sets the CSS property value to null, meaning empty. For top-level style variants, this option appears as Unassigned, while for child variants it appears as Inherit —to indicate the inheritance behavior that's occurring.

  For example, for colors on top-level style variants, this typically means a lack of color, like transparent. But it does have some CSS-related effects:

  • Behind the scenes, the browser climbs the style inheritance chain. This only affects child variants (hence the Inherit label), where the property inherits the parent variant's setting. Top-level variants have nothing to inherit from.

• Transparent: The value is transparent—effectively no color within the element.

• Initial: Sets the CSS property value to Initial. This means that the property reverts to whatever the default setting for that property is for that particular HTML element. This can vary from browser to browser, though they are typically sensible defaults. In rare cases this option may be preferred over Unassigned or Transparent, but it isn't typically recommended.

• Footer: Determines the spacing between the footer and content and buttons,

  • Spacing top: Sets spacing between end of listed content and the footer.
  • Load more horizontal spacing: Spacing above the "Load More" button.
  • Right side horizontal spacing: Spacing to the right of the "Load More" button.

• Line height: Specifies how much space is between each line.

• [Element] Margin: Sets the spacing between an element and the edge of the container or component.

• Margin Top: Sets the size of the margin between component's elements.

• Max width: Sets the maximum width for a component, or for elements, components, or subcomponents within the component.

• Min width: Sets the minimum width for a component, or for elements, components, or subcomponents within the component.

• Padding / Content padding: Sets the space around the content of an element. Padding values are based on available spacing variables.

• Separator: The line separating the Modal's title or footer from the body of the modal. This element uses variables from the borders category for its styles.

  • Size
  • Style
  • Color

• [Element] Spacing / Spacing from [location]: Determines how much space is around or between elements using variables set within the spacing variable category. All spacing values are relative to the spacing options set within the spacing variable.

• Spacing above filter: Specifies the amount of space between the filter and its label.

• [Element] Horizontal spacing: Sets the horizontal spacing around or between labels, titles, buttons, icons or other elements. Values are relative to the spacing options set within the spacing variable.

• [Element] Vertical spacing: Sets the vertical spacing around labels, titles, buttons, or other elements. Values are relative to the spacing options set within the spacing variable.

• Active state: The appearance of a component element in the time between the click and release of an end user.
• Disabled state: The appearance of a component element when an end user cannot interact with it.
• Focus state: The appearance of a component element when it's selected and ready for user interaction/input. Focus state is also used when an end user employs the keyboard to "tab" through elements on a page.
• Hover state: The appearance of a component element when an end user puts their cursor on an element, but doesn't click.
• Selected state: The appearance of a component element when it has been selected or highlighted and remains on the page.

This component uses standard variant properties.

• Button group horizontal spacing: Sets the horizontal spacing between the buttons in the button groups.
• Button group vertical spacing: Sets the vertical spacing between the buttons in the button groups.

This component uses standard variant properties, plus:

• General

  • Spacing below header: Sets the spacing between the top row (with the buttons and title) and the calendar grid.

• Title: Styles the text that appears in the header next to the navigation buttons.

• Day of week labels: Styles the labels at the top of all view types that indicate the days/dates.

• Grouping labels: When grouping is used, styles the labels that appear below the day of week to indicate individual groups.

• Event: Styles the display of individual events on the calendar grid.

  • Default color: The color used for event blocks and event indicator dots.

  • Past event opacity: Sets the shading applied to past events in all views.

  • Text color: Options that allow the renderer to choose a text color that is most readable against the selected event background color.

    • For dark background: When a darker background color is chosen for events, the text color used against that background.
    • For light background: When a lighter color is chosen for events, the text color used against that background.

• Month view: Determines calendar's styles in month view.

  • Side margins: Sets the left and right margins inside the day box.

  • Bullet: Styles the event indicator.

  • Day number: Sets the styles for the calendar day's numbers.

  • Block event: Styles the block that surrounds an all-day or multi-day event.

  • Today: Determines the styles for the "current day" block on the month calendar.

    • Day highlight: Sets styles for the numbered indicator that highlights the current day's date. Day highlight properties include:

      • Fill color
      • Text color
      • Border radius
      • Height
      • Width
      • Padding

• Week and day view: Determines calendar's styles in both week and day view.

  • Time grid: Determines styles for the times listed on the left side of the grid.

  • Now indicator:

    • Line: Styles the line indicating the current time ("Now").
    • Triangle color: Styles the "Now" indicator triangle in the left margin.

  • Today: Determines the styles for the "current day" block on the week or day calendar.

• List view: Determines calendar's styles in list view.

  • Bullet: Styles the event indicator.
  • Day header: Determines the styles for the day headings within the list.
  • Event: Sets styles for the individual event on the list.

This component uses standard variant properties, plus:

• General

  • Button spacing: Determines the amount of padding between the edge of the Carousel component's area in the page and the next/previous buttons within it.

• Nested components

  • Button: Select a style variant for the appearance of the Carousel component's previous/next slide buttons.

• Dots: Determines the styling for the progress indicator dots if they are enabled on the component.

• Slide count: Determines the styling for the slide count indicator if they are enabled on the component.

• Slide content: Determines the amount of padding between the edge of the Carousel component's area in the page and the slide content within it.

This component uses standard variant properties, plus:

• Color palette: A set of colors used to delineate areas within the pie chart.

This component uses standard variant properties:

This component uses standard variant properties, plus:

• Image uploader: When File Upload uses Image Preview, sets the style of the image uploader placeholder.

  • Min height: Sets the minimum height for the uploader placeholder image.

• Image uploader buttons: When File Upload uses Image Preview, sets the spacing around the uploader button(s) that display on the image.

  • Spacing top: Sets the spacing above the button(s).
  • Spacing left: Sets the spacing to the left of the button(s).
  • Spacing between: Sets the spacing between above the uploader and the delete buttons

• Dropzone: Sets the styles for when a user drags a file over the drag-and-drop area.

  • Drag over border: Sets the dropzone border styles when a file is being dragged over the dropzone.

This component uses standard variant properties, plus:

• General

  • Range filter spacing: Specifies the amount of space between date or numeric range filter elements.
  • Vertical separator border: For vertical filters, the line separating the filters from the footer.
  • Button spacing: Sets the spacing between Reset and Apply buttons.
  • Filter spacing: Sets the spacing between each filter.

• Accordion Overrides: When Filter Layout is set to Vertical with Accordions, sets the styles for text in the header.

• Option limit indicator: When the Option Limit is set on a picklist Filter configured to Display As a radio list or multi-select filter, sets the styles for "get more" text.

• Search

  • Min width: Sets the minimum width at which the search bar will render.

This component uses standard variant properties, plus:

• General

  • Save/cancel vertical spacing: Sets the spacing between the Save/Cancel button group and the form.

• Label

  • Spacing top (when positioned left): Sets vertical spacing between labels when the label position is set to left. Values are relative to the spacing options set within the spacing variable.

    • Required

      • Indicator text: The text to indicate required fields.
      • Indicator placement: Sets "required field" indicator text either to the right, left, above, or below the field label.

• Section

  • Header spacing: Sets the spacing between the form header and the form fields.
  • Vertical spacing: Sets the vertical spacing between the last row of a section and a new header.

This component uses standard variant properties, plus:

• Min color: The color that represents the start of the geochart color gradient, or the lowest data value.
• Max color: The color that represents the end of the geochart color gradient, or the highest data value.

Note:  Header variants are usable in the Form component.

This component uses standard variant properties, plus:

• Separator: The line separating the header from the rest of the page.

  • Bottom spacing: Sets the spacing between the top of the line to the bottom of the title.

This component uses standard variant properties.

This component uses standard variant properties, plus:

• General

  • Column spacing: Increases or decreases the spacing between columns.
  • Row Actions spacing: Increases or decreases spacing to the left of the row actions.
  • Checkbox spacing: Increases or decreases spacing to the right of the checkbox.
  • Item spacing: Increases or decreases the spacing between the label and the item.

• Row

  • Last item border bottom: The border styles on the border line that comes after the last item in a list.

    • Size: The thickness of the border. Size values are based on available border size variables.
    • Style: Changes border from the default solid style to dashed or dotted.
    • Color: The color of the border. Color values are based on available color variables.

• Style 1, Style 2, Style 3: Used with the Display Style Override property in the List, these set the styles for the text content within the list.

This component uses standard variant properties, plus:

• Height: Sets the height of the Masthead container.

• Align items: Determines how to align items using Responsive Grid divisions in the masthead. This property has five different values:

  • Flex start: All Masthead items are aligned to the start of the grid.
  • Flex end: All Masthead items are aligned at the end of the grid.
  • Center: All Masthead items are justified in the center of the grid.
  • Baseline: All Masthead items are aligned by their content's baseline
  • Stretch (default): Stretches the Masthead's content to fit the grid's full width.

• Justify content: Sets the spacing between the components placed in the Masthead.

This component uses standard variant properties, plus:

• General

  • Menu offset from navigation: Sets the spacing between the navigation item and its dropdown menu.

This component uses standard variant properties.

• Nested components

  • Autocomplete: Select a style variant for the appearance of the Search component's autocomplete feature.

To style the VIEW ALL link in the search modal, make changes to the View all link property on a new or existing style variant under Menu.

After styling the VIEW ALL link on a Menu style variant, add the Menu style variant to a new or existing style variant for the Autocomplete style variant used by the Search component.

This component uses standard variant properties, plus:

• Accordion overrides: When there is not enough horizontal space to display every tab, they are stacked vertically in accordion-like sections.This controls the spacing between each section.

This component uses standard variant properties, plus:

• Tab container: Determines the properties of the area that contains the tabs.

• Tab: Determines the properties of the tabs.

  • Background color: Sets the background color of the area that contains the label. Background color values are based on available brand color or functional color variables.
  • Space between: Determines how much space is between each tab.

This component uses standard variant properties, plus:

• General

  • Color: Selects the color for the column header text.
  • Row height: Specifies how much space is between each row.

• Row Numbers

  • Min width: Sets the row number cell so that it will render no lower than the chosen amount of pixels.

• Drag and drop state: If Allow users to freeze columns is set to Using Drag and Drop, sets the styles for the drag and drop bar.

  • Dragging shadow: The shadow on the item being dragged.
  • Droppable area color: The color of the area where the item can be dropped.

• Header: Sets the spacing for the table title, mass action buttons, and search bar.

This component uses standard variant properties.

This component uses standard variant properties.

• Step labels: The labels that serve as the descriptive title for each step.

• Step connectors: The lines between the title and the next step number.

  • Line color: Sets the color of the line linking a step label and the next step number.
  • Thickness: Sets the thickness of the step connector line.
  • Vertical connector width: When the Wizard Layout Direction property is set to Vertical, sets the left and right spacing of the line linking a step label and the next step number.

• Navigation buttons: Sets the spacing between the Wizard step navigation buttons.

  • Spacing between buttons: Sets the spacing between Wizard step buttons.

• Step indicators: When using step indicators, sets the appearance of the step indicators.

  • Height: Adjusts the height of the step indicators.
  • Width: Adjusts the width of the step indicators.
  • Spacing between dots: Sets the space between step indicators.

This component uses standard variant properties.

The Autocomplete subcomponent suggests search queries based on the data the search is connected to.

This subcomponent uses standard variant properties, plus:

• General

  • Min width: When Preview with ... is set to Single-select filter, sets the minimum width for the autocomplete field.
  • Max width: When Preview with ... is set to Single-select filter, sSets the maximum width for the autocomplete field.

This subcomponent uses standard variant properties, plus:

• Height: Adjusts the size of the pill container around the text.

The Button subcomponent is an object that represents a clickable button. You can style buttons for countless use cases across your app. Need a circular button to go to the next page in a list? A green button to submit a form? Style it here.

This subcomponent uses standard variant properties, plus:

• General

  • Height: Sets the button height.
  • Width: Sets the button width.
  • Combo icon padding: Sets the space around the combo button's icon. Padding values are based on available spacing variables

The Button Group subcomponent works in tandem with the Button component to create a group of any custom or default buttons.

This subcomponent uses standard variant properties.

Checkbox gives the ability to select single values for submission.

This subcomponent uses standard variant properties, plus:

• General

  • Size: Sets the height and width of checkbox item.

• Checked: The appearance of the checkbox when it is pressed.

  • Check color: Sets the color of the checkmark.

• Disabled state: The appearance of a component element when an end user cannot interact with it.

  • Check color: Sets the color of the checkmark.

The Checkbox List subcomponent gives the ability to select individual values for submission.

This subcomponent uses standard variant properties, plus:

• General

  • List item spacing: Sets the spacing between the checkboxes.
  • Sublist item indentation: Increases or decreases the indentation of the items in a sublist.

The Datepicker subcomponent allows the user to select a date.

Note:  Datepicker variants will be usable in the Input Text subcomponent.

This subcomponent uses standard variant properties, plus:

• General

  • Select spacing: When the Advanced > Show Month & Year Pickers is checked, sets the spacing between the month and year pickers and the days of the week.
  • Spacing between rows: Sets the space between each calendar row.
  • Bottom Button Spacing: When the Advanced > Show Today Button is checked, sets the spacing between the bottom row of dates and the Today button.

• Date

  • Disabled state

    • Opacity: Sets the transparency level of unavailable dates on the datepicker.

The Datetime subcomponent allows the user to select a date and time.

This subcomponent uses standard variant properties, plus:

• General

  • Date spacing: Sets the spacing between the date and time boxes.
  • Hour/minute spacing: Sets the spacing between the hour and minute.
  • AM/PM spacing: Sets the spacing between minute and AM/PM boxes.

The Field subcomponent sets the styles for fields.

Note:  Fields used as elements on Table or Form components must be styled within those components.

This subcomponent uses standard variant properties, plus:

• Label:

  • Spacing top (when positioned left): Sets vertical spacing between labels when the label position is set to left. Values are relative to the spacing options set within the spacing variable.

Note:  Any modifications to the Field subcomponent default option will not display in the page. To make modifications to the default, clone it, name it, and modify the new variant, which then becomes an option in the Table or Form Styles tab.

The Input Text subcomponent creates single-line text fields.

This subcomponent uses standard variant properties, plus:

• General

  • Height: Sets the height of the input area.
  • Min width: Sets the minimum width for the input text field.

• Character count: Allows the user to see the input field character limit, as well how many they've typed.

  • Margin top: Sets the size of the margin between the input and the character count.

• Warning:

  • Border Color: Sets the color of the character count text when character count exceeds, or comes close to, the field character limit.

The Input Text Area subcomponent creates multi-line text fields.

This subcomponent uses standard variant properties, plus:

• General

  • Height: Sets the height of the input area.
  • Min Width: Sets the minimum width for the input text field.

• Character Count: Allows the user to see the input field character limit, as well how many they've typed.

  • Margin Top: Sets the size of the margin between the input and the character count.

• Warning:

  • Border Color: Sets the color of the character count text when character count exceeds, or comes close to, the field character limit.

The Menu subcomponent is a collection of commands that can be performed or activated by a user.

This subcomponent uses standard variant properties, plus:

• General

  • Margin top: Sets the spacing between the menu and whatever is above.

• View all link

These properties determine the styling of the VIEW ALL link for the Search component's dropdown menu. To see the changes to the VIEW ALL styling, select Search from the Preview with... dropdown.

• Color
• Font family
• Font size
• Font weight
• Text decoration

This component uses standard variant properties, plus:

• Icon size: Determines the size of the message icon.
• Icon margin: Determines the margins around the message icon.
• Close icon: Determines the settings for the icon used to close the message block.

Modals are triggered using the actions framework. Modal style variants created within the DSS can be selected and applied when configuring a modal in the Page Designer.

This subcomponent uses standard variant properties, plus:

• General

  • Width: Sets the size of the modal horizontally.

  • Height: Sets the height of the modal vertically.

  • Manage content: Determines how the modal will handle content if the content exceeds the modal's visible space:

    • Hidden: Allows the builder to set parts of the content as outside the modal (and therefore, "hidden").
    • Visible: The modal resizes to fit the content.

  • Bottom spacing (without buttons): Sets padding at the bottom when no buttons are included. All padding values are all relative to the spacing options you set within the Spacing variable.

• Header

  • Title alignment: Sets the horizontal alignment of the title within the modal.

• Close icon

  • Position: Determines the location of the Close Modal icon.

This subcomponent appears within Navigation and Vertical Navigation components, as well as Wizard components set to use Navigation progress indication.

The following properties are available among different states and navigation item types:

• Text color
• Background color
• Font size
• Font weight
• Border
• Border radius
• Text transform
• Letter spacing
• Padding
• Icon spacing
• Box shadow
• Opacity

The Disabled state also allows the ability to set a Cursor type. These values align with other common browser cursors. For more information on cursor types, see the cursor keyword values on MDN docs.

The Horizontal navigation menu spacing property applies when the navigation item appears in a Navigation component and the Type is set to Horizontal.

Vertical navigation section

Styles are applied when the navigation item:

• Appears in a Vertical Navigation component
• Has a Type of Section

Vertical top level navigation

Styles are applied when the navigation item:

• Appears in a Vertical Navigation component
• Is the uppermost item

Nested navigation items will not display styles set here.

This subcomponent uses standard variant properties, plus:

• Links

  • Transition: Allows builder to fade links from one color to another during hover. The default is blank (no transitions). Read about link transitions here.

Important:  This feature is recommended for advanced builders only.

• Progress bar: The bar that appears at the top of the page when the page is loading.

The Pagination subcomponent uses the Button component's "Circular" variant to create a group of buttons allowing the user to navigate through pages.

This subcomponent uses standard variant properties, plus:

• General

  • Index spacing: Sets the spacing between the index buttons.
  • Previous next spacing: Sets the spacing between the Next and the Previous buttons.

Similar to the Checkbox List element, Radio List gives the ability to select single values for submission.

Note:  Radio List variants will be usable in the Form component.

This subcomponent uses standard variant properties, plus:

• General

  • Item spacing: Sets the spacing of the items in the radio list.

  • Align items: Sets how the radio buttons align in relation to their labels.

    • Flex start: All radio buttons are aligned to the top of the label.
    • Flex end: All radio buttons are aligned to the bottom of the label.
    • Center (default): All radio buttons are justified in the center of the label.
    • Baseline: All radio buttons are aligned to the label's baseline.
    • Stretch: Stretches the radio buttons to fit the label's full height (for a horizontal layout) or width (for a vertical one).

  • Size: Sets the size of the radio list circles.

• Selected state

  • Inner color: The color that appears in the center of the button when it is selected.
  • Outer color: The color that appears around the edge of the button when it is selected.
  • Outer width: The width of the color that appears around the edge of the button when it is selected.

The Select subcomponent is a control that, when clicked, provides any number of options in a dropdown.

This subcomponent uses standard variant properties, plus:

• General

  • Text indent: Sets the indentation of the text within the select component.
  • Height: Sets the height of the Select component container.
  • Min width: The select component is rendered to at least this width.

• Caret: The icon on the right side of the select box that indicates more information in a dropdown.

  • Right spacing: Determines the spacing between the "more" caret and the right side of the select box.

The Slider subcomponent allows a user select either a single numeric value or a range value which must be no less than a given value, and no more than another given value.

This subcomponent uses standard variant properties, plus:

• General

  • Container height: Sets the height of the space around the slider bar.

• Track: The bar that indicates the range of options.

  • Track height: Sets the height of the bar under the "thumb," the sliding value indicator for the component.

• Thumb: The sliding indicator on the track.

  • Thumb color: Sets the color of the sliding thumb.
  • Size: Sets the size of the thumb element.

The Sliding Panel subcomponent is a popup window that renders only when triggered, typically, by an associated button.

This subcomponent uses standard variant properties.

The Sort Builder applies one or more sorting rules to data within a Table, List, Deck, or Filter Set component.

This subcomponent uses standard variant properties.

The following properties apply only to the Sort Builder:

• General

  • Row Separator: Set the appearance of the line that appears between sorting rules.

    • Size: Determine the size of the line.

      • None: No line appears between sorting rules.
      • Primary (1px): Sets the line to 1px.
      • Medium (2px): Sets the line to 2px.

    • Style:

      • Initial: No line appears.
      • Primary (solid): A solid line.
      • Dashed (dashed): A dashed line.

    • Color: Sets the color of the line.

• Nested components

The buttons in the Sort Builder can be styled according to the style variants created in the Button nested component.

• Save
• Cancel
• Add field
• Remove

The Sort field selector can be styled according to the style variants created in the Select nested component.

The Sort direction buttons can be styled according to the style variants created in the Button Group nested component.

Row text

The style properties for row text in the Sort Builder are based on the standard font and text styles.

Note:  The appearance of the sort button in the header of a Table, List, Deck, or Filter Set component is controlled by a Button style variant. Navigate to Components > select Table, List, Deck, or Filter Set > Nested components > Sort (Button) and select a Button style variant.

The Switch subcomponent is a button used to toggle states. They are typically used in mobile applications to toggle app settings on and off.

This subcomponent uses standard variant properties, plus:

• General

  • Width: Set the width of the switch.

• Nub: The element that represents the on and off state.

This subcomponent is a field renderer for time fields.

• General

  • Hour/minute spacing: The width of the spacing between the colon and the hour and minute input dropdowns. Change or add spacing values at Variables > Spacing.
  • AM/PM spacing: The width of the spacing between the minute and AM/PM input dropdowns. Change or add spacing values at Variables > Spacing.

• Nested components

  • Select: The appearance of the dropdown of the time field. To change the appearance of the dropdown, create or add a style variant to the Select subcomponent.

The Toast Message subcomponent is an option for providing feedback to users. It's particularly useful for notifications and keeping users up to date with asynchronous processes happening in the background. Toast Messages can be created through the Show Toast Message action.

This subcomponent uses standard variant properties, plus:

• General

  • Max width: The maximum width of the toast message.
  • Min width: The maximum width of the toast message.
  • Spacing from page: The space between the toast message and the page edge.

This subcomponent uses standard variant properties, plus:

• General

  • Max width: The maximum width of the tooltip message.

• Compact: If a component has the tooltip property set to Compact, sets styles for the compacted version of the tooltip.

Note:  UI Blocker variants will be usable in the List component and in the Show message and block UI action.

This subcomponent uses standard variant properties, plus:

• Placeholder: Sets the color of the placeholder text.

The Value Stepper subcomponent is used to let the user enter a number by clicking buttons that increase or decrease the value.

This subcomponent uses standard variant properties.