Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Properties
  • Selection type
  • Options
  • Display value
  • Filter
  • Conditional filters
  • Value
  • Conditional options
  • Allow null
  • Null label
  • Group label
  • Helper text
  • Auto focus
  • Color
  • Margin
  • Orientation
  • Hide option label
  • Show secondary label
  • Event handlers

Was this helpful?

Export as PDF
  1. Library
  2. UI components

Radio buttons

PreviousPopoverNextRich text editor

Last updated 1 year ago

Was this helpful?

Use radio buttons to present a list of options from which only one item can be selected. Radio buttons are often used in forms for data entry or as a way to enable client-side filters.

Examples

Radio button examples are available in our . You can view the demos, as well as access the setup in Appfarm Create. Don't have access? .

Let us say we want to display a set of items, for instance, a set of books. Information about the books is stored in an Object Class Books, which has the following properties: Books.Title, Books.Category, Books.Author, etc. We want all of these properties displayed in a Table or a List, but we do not want all of the books to be shown in the same row set. Instead, we want to filter them into a few subsets, based on, for example, the Category property. The Category property should then be of an ENUM data type, containing the categories by which we are sorting our Books.

In this case, we can use the Radio Buttons UI component, where we data-bind the Value property of the component to the Category property of our Books Data Source, usually over an App Variable or as a runtime Data Source property, since we only want these Category ENUM values to control the visibility of our subsets and be shown as our Radio Buttons Labels.

Once we set this right, we have to set the Conditional Filters in our Table or List, Enable them to filter out the subsets by these Category properties that are data-bound to our Radio Buttons, and set the Filters to display the right Category per each Radio Button.

Properties

Selection type

Select whether to display a list of objects or a list of possible values for an object property.

  • Basic Present a list of objects in a data source. When this option is chosen you can select the data source and a property in that data source to use as a label for each option.

  • Property Display the possible values for an object property. The property must be an enum or a reference to another object class.

Options

Select the data source that contains the objects to list.

Not displayed when Selection type is Property and the property is an enum.

Display value

Select the property to use as a label for each option.

Not displayed when Selection type is Property and the property is an enum.

Filter

Apply a filter to the selected data source.

Not displayed when Selection type is Property and the property is an enum.

Conditional filters

Create conditional filters to apply to the selected data source.

Not displayed when Selection type is Property and the property is an enum.

Value

Displayed when Selection type is Property and the property is an enum.

Note that if the property is within a many cardinality data source you should ensure that the options are displayed within the context of a single object, for example within an iterating container.

Conditional options

Displayed when Selection type is Property and the property is an enum.

Create runtime conditions to restrict the displayed options. The options are evaluated as follows:

  • The first condition that evaluates to true will be used, the rest are ignored.

  • If no conditions are defined, all options will be displayed.

  • If conditions are defined but no conditions evaluate to true, no options will be displayed.

  • If enabled, the null option will always be displayed.

Allow null

Property only.

Enable this to add a radio button to allow the user to clear the value.

Null label

Property only.

If Allow null is enabled, enter a label to use for that radio button.

Group label

Enter a descriptive label for the list of options.

Helper text

Enter additional context about the options to help the user.

Auto focus

Enable to auto focus the first option when the radio buttons are rendered.

If a Radio Button with Auto Focus is outside the visible view (the viewport) when navigating to the view, the browser may scroll down to the Radio Button automatically due to the Auto Focus.

Color

Select the color of the selected option based on the active theme.

  • Primary (default)

  • Secondary

  • Default (this is the Secondary text color)

Margin

Select the margin to apply to the radio button wrapper.

  • Normal (default)

  • Dense

  • None

Orientation

Select the display orientation of the options.

  • Vertical (default)

  • Horizontal

Hide option label

Enable to remove the option labels.

Show secondary label

Property only. Requires vertical orientation.

Enable a secondary label for each option containing the enum value's description from the Global Data Model.

Event handlers

  • On Value Change

Select the property for which to display the list of possible values. The property must be an .

Enable .

Showroom
Register
enum
event handlers