DGT #1 Inputs with label inside input

[snehilvj]

From this:

To this:

with this:

dmc.Select(
    mt="md",
    styles={
        "root": {
            "position": "relative",
        },
        "input": {
            "height": 54,
            "paddingTop": 18,
        },
        "label": {
            "position": "absolute",
            "pointerEvents": "none",
            "fontSize": 11,
            "paddingLeft": 10,
            "paddingTop": 5,
            "zIndex": 1,
        },
    },
    data=["React", "Angular", "Svelte", "Vue"],
    placeholder="Pick one",
    w=300,
    label="Your favorite library",
)

Similarly you can get this:

I’m hoping to make it a series, this one being the first. Hopefully you guys will find these useful.

Check out: https://www.dash-mantine-components.com
Edit: Put this out as a medium blog as well: Customizing Dash Mantine Components using `styles` property | by Snehil Vijay | Mar, 2023 | Medium

Snehil

[Damien_differs]

Amazing work, as always ! Thanks @snehilvj