Customize radio button in SwiftUI

In this tutorial, we will see how we can customize radio buttons in SwiftUI. We basically customize radio buttons to make them more attractive and stylish.

You can look over the link below to gain a basic idea of what a radio button is and how to create it.

Create radio button in SwiftUI

First of all, I am going to create a simple radio button that will be customized as per our requirements. I have explained how we can create a radio button step by step in the link mentioned above.

import SwiftUI

struct ContentView: View {
    
    @State var options: Int = 1
    
    var body: some View {
        Text(" Please select an option").font(.headline)
        VStack (spacing: 20) {
            RadioButtonView(index: 1, selectedOption: $options)
            RadioButtonView(index: 2, selectedOption: $options)
            RadioButtonView(index: 3, selectedOption: $options)
            Text("You have selected: \(options)")
        }
        .padding()
    }
}
struct RadioButtonView: View {
    var index: Int
    @Binding var selectedOption: Int

    var body: some View {
        Button(action: {
            selectedOption = index
        }) {
            HStack {
                Image(systemName: self.selectedOption == self.index ? "largecircle.fill.circle" : "circle")
                    .foregroundColor(.blue)
                Text("Option \(index)")
            }
        }
    }
}

Output:

Horaizontal radio buttons

As you can see in the above output, the options for the radio button are aligned vertically. We can align them horizontally by customizing them.

For this purpose, In the body view we have to embed the RadioButtonView into the HStack like below.

var body: some View {
       Text(" Please select an option").font(.headline).padding()
       HStack (spacing: 20) {
           RadioButtonView(index: 1, selectedOption: $options)
           RadioButtonView(index: 2, selectedOption: $options)
           RadioButtonView(index: 3, selectedOption: $options)
       }
       Text("You have selected: \(options)")
       .padding()
   }

Output:

Customize shape, colour and text size of the radio button

We can use square instead of circle in the image view. The options of the radio button will appear with squares on the screen and the selected square will be filled with a checkmark.

Have a look at the example below.

import SwiftUI

struct ContentView: View {
    
    @State var options: Int = 1
    
    var body: some View {
        Text(" Please select an option").font(.headline)
        VStack (spacing: 20) {
            RadioButtonView(index: 1, selectedOption: $options)
            RadioButtonView(index: 2, selectedOption: $options)
            RadioButtonView(index: 3, selectedOption: $options)
        }
        .foregroundColor(.red)
        .padding()
        
        Text("You have selected: \(options)")
            .font(.title)
    }
}
struct RadioButtonView: View {
    var index: Int
    @Binding var selectedOption: Int

    var body: some View {
        Button(action: {
            selectedOption = index
        }) {
            HStack {
                Image(systemName: self.selectedOption == self.index ? "checkmark.square.fill" : "square")
                    .resizable()
                    .frame(width: 24, height: 24)
                    .foregroundColor(self.selectedOption == self.index ? .black: .brown)
                
                Text("Option \(index)")
            }
        }
    }
}

In the above program, the resizable() modifier allows us to resize images like increase or decrease as per our requirements.

Output: