# Dash Blueprint Components

**URL:** <https://community.plotly.com/t/dash-blueprint-components/85641>\
**Category:** Dash Python\
**Tags:** show-and-tell, community-components\
**Created:** [July 7, 2024, 4:11pm UTC](https://community.plotly.com/t/dash-blueprint-components/85641 "2024-07-07T16:11:26Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![STEdyd666](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/stedyd666/32/28450_2.png) [@STEdyd666](https://community.plotly.com/u/STEdyd666)\
**Post date:** [August 16, 2024, 10:21am UTC](https://community.plotly.com/t/dash-blueprint-components/85641/22 "2024-08-16T10:21:31Z")

</div>

Hi Tobs, I am going to add the style prop to all the components in the next release (in the next days/early next week).

About the other issues:

1. The component has been developed in `uncontrolled` mode, that is way it does not update when changing the `text` prop. I decided to do not use the `controlled` mode because in that case the `value` prop must be updated manually, and the `debounce` functionality cannot be implemented. I’m thinking of moving anyway the component to `controlled` mode, and add two different fields , `value` and `text`, the first that is updated every time the value changes, the second only when the `Enter` key is pressed or the input loses focus.
2. I get the point. When I wrote the documentation I decided to be as close as possibile to the original one, but I agree this is an enhancement that can help a lot the users.
3. The props descriptions are taken directly from the props annotations in the JS file of the components.

---

<div class="post-metadata">

**Author:** ![STEdyd666](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/stedyd666/32/28450_2.png) [@STEdyd666](https://community.plotly.com/u/STEdyd666)\
**Post date:** [August 21, 2024, 8:59am UTC](https://community.plotly.com/t/dash-blueprint-components/85641/23 "2024-08-21T08:59:11Z")

</div>

Hi everyone, I released a new version of the library (0.1.0).

Changes on the new release:

- Added `style` prop to all the components.
- Moved `InputGroup`, `NumericInput` and `TextArea` from `uncontrolled` to `controlled` mode.

The second point fixes the issues described by @Tobs in the [post](https://community.plotly.com/t/dash-blueprint-components/85641/21):  
 ![inputgroup](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/7/9794bea92fe5e8d0b1183c9eada3101486cdbd56.gif)

```python
import dash_blueprint_components as dbpc
import dash
from dash import html, callback, Input, Output

app = dash.Dash( __name__ )

app.layout = html.Div(
    children=[
        dbpc.InputGroup(
            id='input-group',
            placeholder='insert text',
            leftIcon='filter',
            addOnBlur=True,
            rightElement=dbpc.Button(
                id='reset',
                text='Reset'
            )
        ),
        dbpc.FormGroup(
            id='output',
            label='Updated on every user interaction: (value prop)',
        ),
        dbpc.FormGroup(
            id='output-debounce',
            label='Updated only when the input loses focus or Enter key is pressed: (text prop)'
        )
    ],
    style={
        'width': '400px'
    }
)

@callback(
    Output('input-group', 'value'),
    Input('reset', 'n_clicks')
)
def getvalue(_):
    return ''

@callback(
    Output('output', 'children'),
    Input('input-group', 'value')
)
def getvalue(value):
    return value

@callback(
    Output('output-debounce', 'children'),
    Input('input-group', 'text')
)
def gettext(text):
    return text

app.run(debug=True)

```

---

<div class="post-metadata">

**Author:** ![Tobs](https://avatars.discourse-cdn.com/v4/letter/t/6de8d8/32.png) [@Tobs](https://community.plotly.com/u/Tobs)\
**Post date:** [August 22, 2024, 8:37am UTC](https://community.plotly.com/t/dash-blueprint-components/85641/24 "2024-08-22T08:37:12Z")

</div>

Awesome, I will try it out.

[Previous page](https://community.plotly.com/t/dash-blueprint-components/85641.md?page=1)