# select-box

Add a selection interaction box to markdown text.

## How to Use

### Basic Usage

<demo name="custom_tags/select-box/basic"></demo>

### Card Style

<demo name="custom_tags/select-box/card_shape"></demo>

### Card Adapts to Width of Inner Elements

<demo name="custom_tags/select-box/card_shape_width_auto"></demo>

### Listening to Python Events

<demo name="custom_tags/select-box/python_events"></demo>

## API and Parameter List

### value

The corresponding value of custom_data value in the custom event; returns the user's inputted value for options. If type="checkbox", it returns a list.

### props

| Attribute    | Type                                                                                        | Default Value                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------ | ------------------------------------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type         | 'checkbox' \| 'radio'                                                                       | 'radio'                        | The type of selection box: 'radio' for radio buttons, 'checkbox' for checkboxes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| disabled     | boolean                                                                                     |                                | Disable the selection, usually used when reading historical information for re-rendering.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| value        | string                                                                                      |                                | The default selected value, usually used to pre-select some options for the user when `type="checkbox"` and to set the default value for rendering after setting `disabled`.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| direction    | 'horizontal' \| 'vertical'                                                                  | 'horizontal'                   | Arrange selection boxes horizontally or vertically.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| shape        | 'card' \| 'default'                                                                         | 'default'                      | The style of the selection box.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| options      | (string \| { label?: string, value?: string, imgSrc?: string })[]                           |                                | The options provided to the user, each item can be a string or an object. When the value is an object, it can accept more custom values, where imgSrc only takes effect when shape="card".                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| select-once  | boolean                                                                                     | false                          | Whether to allow the user to make a selection only once.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| submit-text  | string                                                                                      |                                | The display value of the submit button. When this attribute has a value, the submit button will be displayed, and the selection event will only be triggered after the user clicks the submit button.                                                                                                                                                                                                                                                                                                                                                                                                                        |
| columns      | number \| { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number } | { xs: 1, sm: 2, md: 2, lg: 4 } | Effective only when shape="card". The number of columns each row of options occupies, the value range is 1 - 24, it is recommended that this value is divisible by 24, otherwise, the number of columns may not meet expectations. When this item is passed as an object, it can responsively control the number of rendered columns per row, responsive thresholds are as follows: <br/> - xs: screen < 576px <br/> - sm: screen ≥ 576px <br/> - md: screen ≥ 768px <br/> - lg: screen ≥ 992px <br/> - xl: screen ≥ 1200px <br/> - xxl: screen ≥ 1600px This configuration does not take effect when direction is vertical. |
| item-width   | string                                                                                      |                                | Effective only when shape="card". The width of each option, such as: 'auto', '100px', the default uses the width automatically allocated by columns.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| item-height  | string                                                                                      |                                | Effective only when shape="card". The height of each option, defaults to adapt to the height of the element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| img-height   | string                                                                                      | '160px'                        | Effective only when shape="card". The height of the images within each option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| equal-height | boolean                                                                                     | false                          | Effective only when shape="card". Whether the height of the options in each row should be equal, using the height of the tallest option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |