Hiding or showing different components based on breakpoint?

I have a Perspective view of a form using the column view container type.

I want it so that when the breakpoint is in the “Small” category, my DateTimeInput component is visible, and my DateTimePicker component is hidden. When the breakpoint is in medium or large, my DateTimePicker component is visible and my DateTimeInput is hiddne. How can I do this?

The column container only allows layout changes at different breakpoint sizes - you cannot change which components you actually have.
What you could do instead is start from a breakpoint container, and then embed a column container (or a dashboard component) to achieve the layout you’re looking for.

Ok, I technically have both components on my view now. I was wondering if it’s possible to access which “breakpoint” is currently in use and write a expression on both of their visible properties. I was just looking through the props/objects tree to see if there’s one that indicates which breakpoint we are currently using. Is there one? Or is that computed behind the scenes?

Nothing that’s exposed to you, as far as I know, but I’m not an expert - I’ll let @cmallonee chime in :slight_smile:

We currently don’t expose any breakpoint or viewport width properties. As @PGriffith recommended, the Breakpoint Container is specifically designed so that you can use different components at different dimensions, and the Column Container is designed so that you can use the same components but in different locations.

There is already a post on the forums to expose viewport dimensions so that you can make adjustments based on viewport properties. Even once that idea is implemented you’d need to hide/un-hide the components as you see fit, which would really require a Flex Container, so then you’re going in a whole different direction.

My advice is to do as was already mentioned, and use a Breakpoint Container for your View’s root, and then place a Column Container for each breakpoint.