oTree Forum >

Which form widgets are available on oTree

#1 by AndreL

I have seen other projects using form widgets such as 'radioSelectHorizontal'

Is there a fully comprehensive list of widgets implemented in oTree, or will any wtforms widget work that way.

(If I may leave a wish-list contribution for future versions, Streamlit Input Widgets would be very useful for a modern feel and look - https://docs.streamlit.io/library/api-reference/widgets )

#2 by Chris_oTree

The only form widgets you can explicitly select are RadioSelect and RadioSelectHorizontal (instead of drop-down list). Apart from that, widgets are automatically determined based on the field type (e.g. LongStringField uses a text area).

#3 by Chris_oTree

By the way I don't recommend using wtforms widgets. oTree uses wtforms internally, but using wtforms directly may malfunction, either in the current release or when you upgrade to a new release.

#4 by AndreL

Thanks, Chris.

I specifically need a numerical input with signs (or arrows) + and - that participants can click to change the default value in fixed steps (e.g. 0.05 units).

I saw some slider implementations directly on HTML (with NoUIslider). Do you have any suggestions instead of Streamlit or wtforms widgets?

#5 by Chris_oTree

You can do this with plain HTML/javascript. Assuming you have a field called 'xyz':

    {{ formfields }}
    
    <button type="button" onclick="decrement()">-</button>
    <button type="button" onclick="increment()">+</button>

    <script>
        let xyz_value = 0;

        function increment() {
            xyz_value += 0.05;
            draw();
        }

        function decrement() {
            xyz_value -= 0.05;
            draw();
        }

        function draw() {
            forminputs.xyz.value = xyz_value.toFixed(2);
        }

        forminputs.xyz.readonly = true;
        draw();
    </script>

Write a reply

Set forum username