> For the complete documentation index, see [llms.txt](https://docs.feathery.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feathery.io/platform/build-forms/elements/custom-fields/compose-elements.md). # Compose Elements You can also create custom Feathery fields directly from the visual editor by composing multiple Feathery elements. ## Examples ### Button group with custom layout

Feathery's default button group styles all options the same way. Using individual buttons allows for custom styling, such as the double-wide "Something else?" text field.

If the default [button group](/platform/build-forms/elements/fields/button-group.md) field layout doesn't work for your use case, you can build your own field with a custom layout. The field above is built with individual [buttons](/platform/build-forms/elements/basic/button.md) configured with the `Save Value to Field` click action. Specify the custom value to store on click, and then connect the button to a field where the value will be stored. If you want the user to only be able to select a single button, you can re-use the same field across all of the buttons in the field. If you want multi-select behavior, use a different field per button so they don't override each other on click.

If the button click action is Save Value To Field, you can configure the value to store and the field to store the value into. The button will appear toggled when selected. Clicking the button again clears the value from the field.

### Multi-select button group with card layout

You can use Containers to create unique card layouts.

By setting the background color of a container and using the `Save Value to Field` click action, you are able to make a clickable card group consisting of any elements you desire. In the image above the first three cards are made with a checkbox field and a few text elements. The last card is just a checkbox and a text field.

If you select a checkbox as the field type there is no value to specify. The action will toggle the checkbox based on the previous value.

### Dynamic Number of Buttons in Group Branching off of the above example, you can create a single container and set it as repeating to allow it to repeat a dynamic number of times. Then, you can set the click action on the container to `Save Value to Field` and make sure to set the save field value to either a repeating field or a hidden field that contains an array of values. Then, set the number of container repeats and set the save field value to an array with the same number of repeats. Now, when each repeating container is clicked, it will save the value corresponding to the same index in the save field array. By default this is a multiselect action - each repeating container can be selected independently. You can turn on the **Single Select** option for the `Save Value to Field` action to ensure only one repeat of the field can be selected at once. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.feathery.io/platform/build-forms/elements/custom-fields/compose-elements.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.