Edit

Radio control in Power Apps

  • Article

An input control that shows multiple options, of which users can select only one at a time.

Description

A Radio control, a standard HTML input control, is best used with only a few, mutually exclusive options.

The control can have a horizontal or vertical layout.

Key properties

Default – The value of a control before the user changes it.

Items – The source of data that appears in a control such as a gallery, a list, or a chart.

Layout – Whether the options are laid out vertically or horizontally.

Value – The value of an input control.

Selected – The data record that represents the selected item.

All properties

Align – The location of text in relation to the horizontal center of its control.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Font – The name of the family of fonts in which text appears.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – The distance between a control's top and bottom edges.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – Whether the text in a control is italic.

LineHeight – The distance between, for example, lines of text or items in a list.

OnChange – Actions to perform when the user changes the value of a control (for example, by adjusting a slider).

OnSelect – Actions to perform when the user taps or clicks a control.

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

RadioBackgroundFill – The background color of the circles in a radio-button control.

RadioBorderColor – The color of the circle for each option in a radio-button control.

RadioSelectionFill – The color that appears inside the circle of the selected option in a radio-button control.

RadioSize – The diameter of the circles in a radio-button control.

Reset – Whether a control reverts to its default value.

SelectedText (Deprecated) – A string value that represents the selected item.

Size – The font size of the text that appears on a control.

Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – Keyboard-navigation order in relation to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – Whether a line appears under the text that appears on a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Distinct( DataSource, ColumnName )

Example

  1. Add a Radio control, name it Pricing, and set its Items property to this formula:

    ["Standard", "Premium"]

    Don't know how to add, name, and configure a control?

  2. Add a Label control, move it below the Radio control, and set the Text property of the Label control to this formula:

    If("Premium" in Pricing.Selected.Value, "$200 per day", "$150 per day")

    Want more information about the If function or other functions?

  3. While holding down the Alt key, select either option in the Radio control.

    The Label control shows the appropriate text for your choice.

  4. (optional) While holding down the Alt key, select the other option to confirm that the appropriate text appears.

Accessibility guidelines

Color contrast

In addition to the standard color contrast requirements, ensure adequate color contrast between:

  • RadioSelectionFill and RadioBackgroundFill
  • RadioBackgroundFill and Fill

Screen-reader support

  • Ensure that every option has a Value.
  • Consider adding a Label immediately before the Radio control to serve as the heading.

Keyboard support