> ## Documentation Index
> Fetch the complete documentation index at: https://docs.typebot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons

export const YoutubeVideo = ({id}) => <div style={{
  position: 'relative',
  paddingBottom: '64.63195691202873%',
  height: 0
}}>
    <iframe title="Youtube video" src={`https://www.youtube.com/embed/${id}`} allowFullScreen style={{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  borderRadius: '8px'
}}></iframe>
  </div>;

The Buttons input block allows you to offer your user predefined choices, either single choice options or multiple choices

## Single choice

Single choice input allows you to directly split your flow depending on what the user selects by linking any choice to a specific path in your flow.

Link the "Default" item to determine the default path independent of what the user chooses.

<Tabs>
  <Tab title="Flow">
    <Frame>
      <img src="https://mintcdn.com/typebot/_A9p16JCEDI2EkLF/images/blocks/inputs/single-choice-flow.png?fit=max&auto=format&n=_A9p16JCEDI2EkLF&q=85&s=35dbe9011f0bf8aa361798d29c137cad" alt="Buttons input in flow" className="rounded-lg" width="1312" height="922" data-path="images/blocks/inputs/single-choice-flow.png" />
    </Frame>
  </Tab>

  <Tab title="Bot">
    <Frame>
      <img src="https://mintcdn.com/typebot/_A9p16JCEDI2EkLF/images/blocks/inputs/single-choice-bot.png?fit=max&auto=format&n=_A9p16JCEDI2EkLF&q=85&s=09dfe393ca69b0d1ff45e902cc8009bb" alt="Buttons input in bot" className="rounded-lg" width="828" height="364" data-path="images/blocks/inputs/single-choice-bot.png" />
    </Frame>
  </Tab>
</Tabs>

## Multiple choices

<Tabs>
  <Tab title="Flow">
    <Frame>
      <img src="https://mintcdn.com/typebot/_A9p16JCEDI2EkLF/images/blocks/inputs/multiple-choices-flow.png?fit=max&auto=format&n=_A9p16JCEDI2EkLF&q=85&s=95f59e2d0f3e52291df3e41dbfd6b4c8" alt="Multiple choices in flow" className="rounded-lg" width="1302" height="1046" data-path="images/blocks/inputs/multiple-choices-flow.png" />
    </Frame>
  </Tab>

  <Tab title="Bot">
    <video controls autoPlay className="rounded-lg" src="https://mintcdn.com/typebot/_A9p16JCEDI2EkLF/images/blocks/inputs/multiple-choices-bot.mp4?fit=max&auto=format&n=_A9p16JCEDI2EkLF&q=85&s=8ab18004444d22f3c548af046aaab635" data-path="images/blocks/inputs/multiple-choices-bot.mp4" />
  </Tab>
</Tabs>

## Dynamic items

Instead of adding items manually, you can also display a dynamic list of items based on a variable.

<Frame>
  <img src="https://mintcdn.com/typebot/_A9p16JCEDI2EkLF/images/blocks/inputs/buttons-dynamic.png?fit=max&auto=format&n=_A9p16JCEDI2EkLF&q=85&s=d07e986abf2560139b56e05f3170b995" alt="Dynamic items list" width="1284" height="682" data-path="images/blocks/inputs/buttons-dynamic.png" />
</Frame>

This is useful when you want to display a list of items from another data source. For this to work, you first need to make sure the variable you are using contains a list of values. This list can be extracted from an integration block like Google Sheets.

## Item options

### Display condition

Allows you to conditionally display a specific button.

<YoutubeVideo id="c7LhC5BRSIA" />

### Internal value

Allows you to assign an internal value for that specific button. If your user selects this button, the internal value will be saved in the variable you've set in the `Save answer` option.

## How to

### Add a "Other" button

Sometimes you want to allow your user to enter a value that is not in the predefined choices. You can do this by adding a "Other" button and connect it to a "Text" input block.

<Frame>
  <img src="https://mintcdn.com/typebot/_A9p16JCEDI2EkLF/images/blocks/inputs/buttons-other.png?fit=max&auto=format&n=_A9p16JCEDI2EkLF&q=85&s=42e21d3152a1a3892fefbe93bce469d5" alt="Other button flow" width="1620" height="1202" data-path="images/blocks/inputs/buttons-other.png" />
</Frame>

### Different replies based on multiple choices

If you'd like to have different replies based on the multiple choices the user selects. You will need to

1. Save the answer into a variable.
2. Add a "Condition" block
3. Add comparisons based on the value of this variable

<Frame>
  <img src="https://mintcdn.com/typebot/_A9p16JCEDI2EkLF/images/blocks/inputs/buttons-condition.png?fit=max&auto=format&n=_A9p16JCEDI2EkLF&q=85&s=c541445173bf70a1f5ed845f6cf62a6f" alt="Condition multiple button flow" width="2210" height="1440" data-path="images/blocks/inputs/buttons-condition.png" />
</Frame>
