Property Reference

Variables

Global style declarations separated by categories, which are based on the general purpose of the variable (Color, Typography, etc.).

Builders can add custom variables by clicking Add and configuring the new option.

Note

Variables, components, and component elements are previewed in the center panel. Make adjustments to their properties using the right panel.

Brand colors [[]]

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 found here. By default, Skuid provides a few colors and color palettes, but any default can be changed, or new colors can be created, to reflect a company aesthetic.

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.

Warning

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 colors [[]]

Functional color variables are created with the explicit purpose of assigning a brand color to a functional name–for example, assigning brand color Skuid blue to a Font Color variable.This allows for clarity when styling components. Instead of searching for the correct shade of Skuid 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 [[]]

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 [[]]

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.

Shadows [[]]

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.

Spacing [[]]

Determines how much space is between elements using custom size values. By default, spacing variables are set to Skuid 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:

Note

Once the base value measurement (px or rem) is selected in the DSS, dropdown menus for spacing values on pages built with that design system will reflect that measurement.

  • px (default): Pixels are fixed size units: one pixel equals one screen dot. Px is a precise measurement. The default px value in the DSS is 8 px.
  • rem: Root ems (rem) is a unit equal to the font-size of the root HMTL element. Rem is a relative measurement, scalable for mobile devices. The default value in the DSS is 0.5 rem.
  • 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.

Typography [[]]

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

Component properties—standard

The DSS lists each drag-and-drop component found in the Composer, as well as the elements that make up those drag-and-drop elements.

The following DSS properties appear in multiple component and component element variants.

Note

Some DSS property names may be prepended with the name of the element they are associated with, such as Font Size—prepended as Label Font Size or Message Font Size. To simplify this, in the list below, [Element] stands in for any modifiers in the property name.

General [[]]

  • Preview with…: Preview the component with common configurations available within the Composer. 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.

Fonts/Text/Icons [[]]

  • 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.

Layout/visuals [[]]

  • [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.

Spacing [[]]

  • 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.

States [[]]

  • 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.

Component properties—specific to the component

The following properties only appear in specific component variants.

Accordion [[]]

This component uses standard variant properties.

Button Set [[]]

  • 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.

Calendar [[]]

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.

Chart [[]]

This component uses standard variant properties, plus:

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

Deck [[]]

This component uses standard variant properties:

File Upload [[]]

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.

Filter Set [[]]

Note

Filter Set variants will be usable in these components:

  • Deck
  • List
  • Table

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 Header: When Filter Layout is set to Vertical with Accordions, sets the styles for text in the header.

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

    • Margin Top: Sets the margin between the filter and the footer.
  • Search

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

Form [[]]

This component uses standard variant properties, plus:

  • General

    • Save/cancel vertical spacing: Sets the spacing between the Save/Cancel button group and the form.
  • Read Mode: Sets styles for the value when it is in read or read-only mode.

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

  • 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.

Geochart [[]]

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.

Image [[]]

This component uses standard variant properties.

List [[]]

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 Override 1, Style Override 2, Style Override 3: Used with the Display Style Override property in the List, these set the styles for the text content within the list.

Masthead [[]]

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.

Responsive Grid [[]]

This component uses standard variant properties.

Tab Container [[]]

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.

Tab Set [[]]

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.

Table [[]]

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.
  • Read mode: Sets the styles for editable text when in read mode.

  • Header row: Sets the styles for the header row that sits on top of the Table’s columns.

    • Background color: Sets the background color of the header row. Background color values are based on available brand color or functional color variables.
    • Border bottom: Sets the size, style, and color of the bottom part of the header row.
    • Between cells border: Sets the size, style, and color of the border between cells in the header row.
    • Color: Selects the color for the header row text.
    • Font size: Specifies the size of the font.
    • Font weight: Specifies the boldness of the font.
    • Text transform: Specifies whether the text should be upper or lower case.
  • Row numbers

    • Min width: Sets the row number cell so that it will render no lower than the chosen amount of pixels.
  • Change mode icon: Sets the icon used to shift from read to edit mode.

  • 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.

Text [[]]

Note

Text variants will be usable in these components:

  • Deck
  • Header

This component uses standard variant properties.

Vertical Navigation [[]]

This component uses standard variant properties.

Wizard [[]]

  • 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.

Wrapper [[]]

This component uses standard variant properties.

Component properties—specific to the subcomponent

The following properties only appear in specific subcomponent variants.

Autocomplete [[]]

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

Note

Autocomplete variants will be usable in these components:

  • Search
  • Form
  • Table

This component 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.

Badge [[]]

This component uses standard variant properties, plus:

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

Button [[]]

The Button component 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.

Note

Button variants will be usable in these components:

  • File Upload
  • Navigation
  • Wizard
  • Button Group
  • Datepicker
  • Pagination
  • Value Stepper

This component 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

Button Group [[]]

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

Note

Button Group variants will be usable in these components:

  • Deck
  • Form
  • List
  • Table

This component uses standard variant properties.

Checkbox [[]]

Checkbox gives the ability to select single values for submission.

Note

Checkbox variants will be usable in these components:

  • Form
  • Table
  • Checkbox List
  • Radio List
  • Table

This component 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.

Checkbox List [[]]

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

Note

Checkbox List variants will be usable in these components:

  • Form
  • Select

This component 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.

Datepicker [[]]

The Datepicker component allows the user to select a date.

Note

Datepicker variants will be usable in the Input Text component.

This component 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 Butting Spacing:
  • Date

    • Disabled state

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

Datetime [[]]

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

Note

Datetime component variants will be usable in these components:

  • Form
  • Table

This component 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.

Field [[]]

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.

Input Text [[]]

The Input Text element creates single-line text fields.

Note

Input Text variants will be usable in these components:

  • Form
  • Table
  • Autocomplete
  • Datetime
  • Value Stepper

This component 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.

Input Text Area [[]]

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

Note

Input Text Area variants will be usable in these components:

  • Form
  • Table

This component 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.

Message Block[[]]

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.

Page [[]]

This component 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.

Warning

This feature is recommended for advanced Skuid builders only.

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

Radio List [[]]

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 component 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.

Select [[]]

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

Note

Select variants will be usable in these components:

  • Deck
  • Form
  • List
  • Table
  • Datetime

This component 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.

Slider [[]]

The Slider component 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.

Note

Slider variants will be usable in these components:

  • Form
  • Table

This component 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.

Sliding Panel [[]]

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

This component uses standard variant properties.

Sort Builder [[]]

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.

Switch [[]]

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

Note

Switch variants will be usable in these components:

  • Form
  • Table

This component uses standard variant properties, plus:

  • General

    • Width: Set the width of the switch.
  • Nub: The element that represents the on and off state.

Time [[]]

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.

Toast Message [[]]

The Toast Message component 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 component 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.

Tooltip [[]]

This component 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.

UI Blocker [[]]

Note

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

This component uses standard variant properties, plus:

  • Placeholder: Sets the color of the placeholder text.

Value Stepper [[]]

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

Note

Value Stepper variants will be usable in these components:

  • Form
  • Table

This component uses standard variant properties.