Cardiff Council Content and design system

www.cardiff.gov.uk

App

viewers

Pdf page viewerMarkdown viewMap Image

popups

How to: Animate a popupHow to: Create a popupSuccess popup (page removal)Message popupSuccess popup (and or go to new route)

pages

Base pageHome pageProcess pageDetails page

layout

Section headingDividerNoteMarginsError labelHeadingHighlightAlertNotifyAnimationTextStandard header iconsLinks

input

SwitchTime pickerPickerCheckboxText editorMapSearch bar with GPSSearch addressSearch barText entry

buttons

EditCancel buttonVertical transparent buttonVertical inverted buttonTag buttonCarousel buttonCallout button (Main)Vertical buttonNext / Back buttonsClose buttonInfo buttonFull button

accessibility

AutomationProperties.IsInAccessibleTreeAutomationProperties.NameAutomationProperties.HelpTextUseful docs

Search address

A search bar to find an address using the location API.

How to use this component

Used whenever we need to be able to gather a UPRN.
Should always default to the users saved address from their personal details.


Code Resource


Deprecated: htmlentities(): Passing null to parameter #1 ($string) of type string is deprecated in /home/site/wwwroot/wp-content/themes/huntsman-child/single-mobile.php on line 96
<inputs:SearchAddress Margin="{StaticResource FormMargins}"
                      AddressLine="{Binding PersonalDetails.AddressLine}"
                      RemoveAddressCommand="{Binding RemoveAddressCommand}"
                      SearchCommand="{Binding AddressSearchCommand}" />
  • AddressLine
    • Used to set the AddressLine. If the address line is added then the search bar will disappear and the address will be displayed
    • Default is String.Empty
  • SearchCommand
    • Invoked if the user clicks the search button in the control/ or on the keyboard
  • RemoveAddressCommand
    • Invoked when the user clicks the clear address button
  • SearchClicked
    • Invoked if the user clicks the search button in the control/ or on the keyboard
  • RemoveAddressClicked
    • Invoked when the user clicks the clear address button

How should this component look?