Skip to main content
Showing results for 
Search instead for 
Did you mean: 

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

Regular Visitor

Use Html content<input type=radio> visual to build a slicer, how to get slicer function。

In power bi desktop,  we can't setting the input radio color, I want to use html <input type=radio> and css to get custom style.

it display the custom select element, but how can get the slicer function.


Month = 
    var month_r = Format([Month],"Mmm-yy")
    var before_str = "<label><input type='radio' name='month'><span>"
    var after_str = "</span></label>"
    return before_str & month_r & after_str
css_month = "<style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;

            label {
                position: relative;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
                margin-left: 12px;color:#FFEFD5;

            input[type=radio] {
                visibility: hidden;
                height: 30px;
                margin-left: .2rem;


            input[type=radio]:checked::before {
                background: #2957FF;
                visibility: visible;

            input[type=radio]::before {
                content: '';
                position: absolute;
                margin-top: 15px;
                margin-left: 2px;
                height: 16px;
                width: 16px;
                border-radius: 50%;
                background-color: rgba(152,251,152,0.2);
                visibility: visible;
                z-index: 2;

            input[type=radio]::after {
                content: '';
                position: absolute;
                height: 20px;
                width: 20px;
                margin-top: 13px;
                border-radius: 50%;
                background-color: transparent;
                border: 2px solid #FFF8DC;
                visibility: visible;
                z-index: -1;






Super User
Super User

Hi @Andrew_lu1933,

HTML Content does not support JavaScript, or include any of the JavaScript APIs necessary for building custom visuals using the TypeScript SDK.

If you're looking to build a functional slicer, please refer to the documentation for developing a custom visual here. Once you are familiar with the concepts required, you can look at setting up and using the filter API to ensure that your visual works as a slicer.



Did I answer your question? Mark my post as a solution!

Proud to be a Super User!

My course: Introduction to Developing Power BI Visuals

On how to ask a technical question, if you really want an answer (courtesy of SQLBI)

Super User
Super User

Frequently Asked Questions | HTML Content - Custom Visual for Power BI (


Did I answer your question? Mark my post as a solution!

Proud to be a Super User!

Helpful resources

RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.


Fabric Monthly Update - May 2024

Check out the May 2024 Fabric update to learn about new features.


Fabric certifications survey

Certification feedback opportunity for the community.