Bindable Field

Toggles between a value picker (a Select / MultiSelect) and a variable expression text field. It always renders a bind/unbind toggle button automatically, so you don't need to manage that yourself.

When to use

To trigger a secondary action:

Action

Interaction

Bind to variable

Changes the Select or MultiSelect to TextField

Unbind from variable

Changes TextField to its original field (Select or MultiSelect)

Insert existing resource (variable or parameter)

Initiates a dropdown menu

Add resource (variable or parameter)

Initiates a Drawer (result of secondary action)

Refresh variable list

Currently: Refreshes the MultiSelect list.

🚩 Soon to be deprecated. Refreshing should exist contextually within the dropdown list.

 

When not to use

  • To add an entity, e.g. a package feed, account or resource. Use a tertiary Button instead.

Best practices

Do

Do use hasActions for a maximum of two secondary actions.

Do

Do use hasSuffix for primary actions, such as show/hide.

Do

Do use the tertiary Button to add an entity, e.g. Add feed

Don't

Don’t use hasSuffix for secondary actions.

Bindable Field
Overview
Bindable Field
Code
Design Resources
Engineering Resources
Slack Channels

© 2026 Octopus Design System. Page last updated on Jul 28, 2026, 00:41