Dividers in FormFieldSelect (Form field for select input)

[zaelcovsky]

Is it possible to add inactive divider between select options in FormFieldSelect (Form field for select input)?
If not maybe there is a workaround for that?

[zaelcovsky]

Working approach:

1. add custom css class status-dropdown-custom to c.FormFieldSelect:

          c.FormFieldSelect(
                name='your name',
                title='your title',
                class_name='+ input-content status-dropdown-custom',
                options=status_options,
                placeholder='your placeholder',
                required=True
            ),

2. create new file custom_styles.css in project (here I need to desable only 4 options in dropdown menu:

.status-dropdown-custom .fastui-react-select__option:nth-child(1),
.status-dropdown-custom .fastui-react-select__option:nth-child(10),
.status-dropdown-custom .fastui-react-select__option:nth-child(23),
.status-dropdown-custom .fastui-react-select__option:nth-child(26) {
    font-weight: 500 !important;
    color: #999 !important;
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

3. inject this custom_styles.css in basic page:

import re

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import HTMLResponse
from fastui import FastUI, prebuilt_html
from starlette.staticfiles import StaticFiles

from app.router import router

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  
    allow_credentials=True,
    allow_methods=["*"],  
    allow_headers=["*"],  
)

app.include_router(router, prefix='/api')
app.mount("/static", StaticFiles(directory="app/frontend/static"), name="static")


@app.get('/{path:path}', response_model=FastUI)
async def html_landing() -> HTMLResponse:
    """Simple HTML page which serves the React app, comes last as it matches all paths."""
    html_str = prebuilt_html(title='FastUI Demo')

    static = """
    <link id="favicon" rel="icon" type="image/x-icon" href="/static/images/favicon.ico">
    <link rel="stylesheet" href="/static/css/custom_styles.css">
    """

    match = re.search('</head>', html_str)
    if match:
        html_str = html_str[:match.start()] + static + html_str[match.start():]

    return HTMLResponse(html_str)