The control property found on schemas and layouts can alter the visual appearance and/or functionality the components they represent. control values can also be used to display custom components through custom rendering inside flows.
See the sections below for the list of control values currently supported by DF.
splash
Display the step with centered aligned content.
val splashStepExample = Step.build {
id = "splash"
title = ""
control = Control.Step.SPLASH
layout {
media {
media = Media.Image.build {
uri = "urn:wise:illustrations:megaphone"
}
}
heading {
text = "Success!"
control = Control.Layout.Heading.DISPLAY
align = Align.CENTER
}
paragraph {
text = "Congratulations! Everything went... according to plan."
align = Align.CENTER
margin = Size.XL
}
}
footer {
button {
title = "Continue"
control = Control.Layout.Button.PRIMARY
behavior = ActionBehavior.build {
action {
exit = true
}
}
}
}
}splash-celebration
Display the step in a celebration context.
val splashCelebrationStepExample = Step.build {
id = "splashcelebration"
title = ""
control = Control.Step.SPLASH_CELEBRATION
layout {
media {
media = Media.Image.build {
uri = "urn:wise:illustrations:plane?+type=animated"
}
}
heading {
text = "Success!"
control = Control.Layout.Heading.DISPLAY
align = Align.CENTER
}
paragraph {
text = "Congratulations! Everything went... according to plan."
align = Align.CENTER
margin = Size.XL
}
}
footer {
button {
title = "Continue"
control = Control.Layout.Button.PRIMARY
behavior = ActionBehavior.build {
action {
exit = true
}
}
}
}
}bordered
Displays a border around the Boxed content.
box {
width = Size.MD
control = Control.Layout.Box.BORDERED
components {
paragraph {
text = "Sending money shouldn't cost the earth. That's why we charge you as little as possible when you transfer and exchange money internationally."
}
}
}bordered-web
Displays a border around the Boxed content only in web.
circular
Displays button as a circular button with an icon, with text below
button {
title = "Pay with QR"
control = Control.Layout.Button.CIRCULAR
behavior = ActionBehavior.build {
action {
url = "/qr-code-pay"
method = HttpMethod.GET
}
}
media = Media.Image.build {
uri = "urn:wise:icons:qr-code"
}
}primary
Sets the button to use theprimary button style
button {
title = "Continue"
control = "primary"
behavior = ActionBehavior.build {
action {
url = "/submit"
method = HttpMethod.POST
}
}
}secondary
Sets the button to use thesecondary button style
button {
title = "Maybe later"
control = Control.Layout.Button.SECONDARY
behavior = ActionBehavior.build {
action {
url = "/dismiss"
method = HttpMethod.POST
}
}
}secondary-neutral
Sets the button to use thesecondary-neutral button style
small
Displays button as a small button Related tags: ALIGN_CENTER
button {
title = "Add"
control = Control.Layout.Button.SMALL
behavior = ActionBehavior.build {
action {
url = "/add"
method = HttpMethod.POST
}
}
}tertiary
Sets the button to use the tertiary button style
button {
title = "Learn more"
control = Control.Layout.Button.TERTIARY
behavior = ActionBehavior.build {
action {
url = "/learn-more"
method = HttpMethod.GET
}
}
}filtered
Allows client-side filtering of the options in the decision
decision {
title = "Recent Purchases"
control = "filtered"
options {
option {
title = "Invoice for Consulting"
description = "Down Under LTD"
supportingValues {
value = "100 AUD"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:au:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/au-currency"
}
}
}
option {
title = "TV License"
description = "British Broadcasting Network"
supportingValues {
value = "50 GBP"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:gb:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/gbp-currency"
}
}
}
option {
title = "Enchantment Table"
description = "Mooshroom Industries"
supportingValues {
value = "30 USD"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:us:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/us-currency"
}
}
}
option {
title = "Mjölnir"
description = "B&S Manufacturing"
supportingValues {
value = "10 NOR"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:no:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/no-currency"
}
}
}
}
}spotlight
Enables spotlight styling for the decision options, to be used with the related spotlight tags. Spotlight should be used when options navigate the user to features they can configure. Related tags: SPOTLIGHT_ACTIVE, SPOTLIGHT_INACTIVE
with-avatar
Displays all option images in an Avatar. Note that when using media this has no effect.
content
A divider with content-level visual weight for individual items
section
A divider with section-level visual weight for major content divisions
divider {
control = Control.Layout.Divider.SECTION
}display
Large, prominent heading using the Wise Sans display font for high-impact moments (e.g. a user's name on a profile screen, a headline on a splash screen). Use for headings that should draw immediate attention, not for regular section titles.
heading {
text = "Whoa, that was fast!"
control = "display"
}saveable
Displays a button to save the image onto device.
shareable
Displays a button to share the image.
copyable
Displays text in a read-only text field with a button to copy the content.
horizontal
Displays the field label and value inline.
horizontal-end-aligned
Displays the field label inline, with the value aligned with the end edge based on locale.
horizontal-start-aligned
Displays the field label inline, with the value aligned with the start edge based on locale.
vertical
Displays the field label and value vertically.
vertical-one-column
Displays fields vertically in a single column.
vertical-two-column
Displays fields vertically in two columns.
inline
Displays search results in a dropdown (Web only)
search {
method = HttpMethod.GET
url = "/companies"
param = "search"
title = "Company"
emptyMessage = "No company found"
control = Control.Layout.Search.INLINE
}chips
Displays the tab selection as a chip group.
tabs {
control = "chips"
tabs {
tab {
title = "Transactions"
components {
list {
title = "Today"
items {
item {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:KR" } }
}
title = "Soda Pop"
supportingValues {
value = "1,500 KWR"
}
}
item {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:confetti?=background=sentiment-warning" } }
}
title = "Saja Boys Album Vinyl"
supportingValues {
value = "3,500 KWR"
}
}
}
}
}
}
tab {
title = "Quick Options"
components {
decision {
control = "spotlight"
options {
option {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:upward-graph?=background-color=brand-bright-green&foreground-color=base-dark" } }
}
tag = "spotlight-active"
title = "Interest active"
description = "3.51% variable rate"
behavior = ActionBehavior.build {
action {
url = "/variable-rate"
}
}
}
option {
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:auto-convert?=background-color=base-light" } }
}
title = "Auto conversions"
description = "Convert money between your currencies at your chosen rate."
behavior = ActionBehavior.build {
action {
url = "/auto-conversion"
}
}
}
}
}
}
}
}
}segmented
Displays the tab selection as a segmented control.
tabs {
control = Control.Layout.Tabs.SEGMENTED
tabs {
tab {
title = "Send"
components {
paragraph {
text = "Send money to over 80 countries worldwide."
}
}
}
tab {
title = "Receive"
components {
paragraph {
text = "Get paid in 10+ currencies with your account details."
}
}
}
}
}checkbox-item
Use a checkbox component with support for additional context such as a third line of text and an inline alert.
obj {
id = "#schema"
properties {
boolean("marketing") {
title = "Marketing emails"
description = "Receive tips and product updates from Wise."
control = Control.Schema.Boolean.CHECKBOX_ITEM
}
}
}switch-item
Use an input suitable for on/off switch.
boolean("recurringPayment") {
title = "Recurring payment"
control = "switch-item"
defaultValue = true
}radio
Allow selection between child schemas using a set of radio options.
obj {
id = "#schema"
properties {
oneOf("account") {
title = "Which account type would you like to open?"
control = Control.Schema.OneOf.RADIO
schemas {
const {
title = "Business"
value("BUSINESS")
}
const {
title = "Personal"
value("PERSONAL")
}
}
}
}
}radio-item
Allow selection between child schemas using a set of radio options with support for additional context such as a third line of text and an inline alert.
obj {
id = "#schema"
properties {
oneOf("plan") {
title = "Choose a plan"
control = Control.Schema.OneOf.RADIO_ITEM
schemas {
const {
title = "Standard"
description = "Free transfers up to 1,000 GBP/month"
value("STANDARD")
}
const {
title = "Premium"
description = "Unlimited free transfers and priority support"
value("PREMIUM")
}
}
}
}
}segmented
Allow selection between items using a segmented control.
obj {
id = "#schema"
properties {
oneOf("paymentMethod") {
title = ""
control = Control.Schema.OneOf.SEGMENTED
schemas {
const {
title = "ACH"
value("ACH")
}
const {
title = "Wire"
value("WIRE")
}
const {
title = "SWIFT"
value("SWIFT")
}
}
}
}
}tab
Allow selection between child schemas using tabs. Note that depending on the number of child schemas, some clients may choose to ignore this control.
obj {
id = "#schema"
properties {
oneOf("details") {
title = ""
control = Control.Schema.OneOf.TAB
schemas {
obj {
title = "Local"
properties {
string("account-number") {
title = "Account number"
}
string("sort-code") {
title = "Sort code"
}
}
}
obj {
title = "International"
properties {
string("iban") {
title = "IBAN"
}
string("bic") {
title = "BIC"
}
}
}
}
}
}
}date-lookup
Presents a calendar for date selection.
obj {
id = "#schema"
properties {
string("date") {
title = "Transfer date"
format = StringSchema.Format.DATE
control = Control.Schema.String.DATE_LOOKUP
placeholder = "Select a date"
minimum = "2023-01-01"
maximum = "2026-12-31"
}
}
}email
Use an input suitable for email entry. Note that this does not provide validation. Please use the pattern property with an appropriate regex for email validation.
numeric
Use an input suitable for entering a string of numbers.
password
Use a secure control intended for entering secrets such as password.
obj {
id = "#schema"
properties {
string("password") {
title = "Password"
control = Control.Schema.String.PASSWORD
autocompleteHint(AutocompleteToken.PASSWORD)
}
}
}phone-number
Use an input suitable for phone number entry.
obj {
id = "#schema"
properties {
string("phone") {
title = "Phone number"
control = Control.Schema.String.PHONE_NUMBER
autocompleteHint(AutocompleteToken.PHONE_NUMBER)
}
}
}sharable
Use a component that allows sharing the provided content. e.g: images
textarea
Use an input suitable for multi-line text input.
obj {
id = "#schema"
properties {
string("feedback") {
title = "Please leave your comments below"
control = Control.Schema.String.TEXTAREA
}
}
}inline
Prefer inlined multi-selectable items instead of a drop-down.
inline-checkbox-group
Prefer checkbox group for multi-selectable items.
obj {
id = "#schema"
properties {
list("currencies") {
title = "Select your preferred currencies"
addItemTitle = ""
editItemTitle = ""
control = Control.Schema.Array.INLINE_CHECKBOX_GROUP
items = OneOfSchema.build {
schemas {
const {
title = "USD"
description = "United States dollar"
media = Media.Avatar.build {
content { uri { uri = "urn:wise:currencies:usd:image" } }
}
value("USD")
}
const {
title = "GBP"
description = "British pound"
media = Media.Avatar.build {
content { uri { uri = "urn:wise:currencies:gbp:image" } }
}
value("GBP")
}
const {
title = "EUR"
description = "Euro"
media = Media.Avatar.build {
content { uri { uri = "urn:wise:currencies:eur:image" } }
}
value("EUR")
}
}
}
}
}
}