bp-sdk-select-input

Custom element hooks

Name	Description
bp-sdk-external-select-input	disables html

Classes

Name	Description
bp-sdk-input-container	Root div element
bp-sdk-select__button	Button element to toggle expansion state of select list
bp-sdk-invalid	Dynamic class on button if list is invalid
bp-sdk-touched	Dynamic class on button if list is touched
bp-sdk-pristine	Dynamic class on button if list is pristine
bp-sdk-align-right	Class suggesting to align element to right
bp-sdk-select__button-arrow	Class suggesting content is an arrow
bp-sdk-select__list	Unsorted List element
bp-sdk-select__list-item	List item element that displays choice
bp-sdk-select__list-item-${choice.id}	List item element scoped to a choice by id
bp-sdk-select__list-item-selected	Dynamic class for list element when choice is selected
bp-sdk-no-selection	Div element that displays when no content
bp-sdk-select__list-item-label	Label element for choice's input element, used when multiple select
bp-sdk-select__list-item-content	Used on input or span element where content is displayed to share styling
bp-sdk-select__list-item-input	Input element for choice, used when multiple select
bp-sdk-select__list-item-input-${this.code}	scoped to a question by code
bp-sdk-select__list-item-text	Span element for choice to display text, used when single select
bp-sdk-select__list-item-text-${this.code}	scoped to a question by code
bp-sdk-select__label	Label element
bp-sdk-visually-hidden	Dynamic class when element should be hidden

Properties

Property	Attribute	Description	Type	Default
answerId	answer-id	Answer id	string	undefined
answeredBySource	answered-by-source	Specifically how the question was answered (ie. "ACORD 126")	string	undefined
autoComplete	auto-complete	Autocomplete attribute value for input	string	undefined
choiceId	choice_id	Choice id selected. Used for single selection.	string	undefined
choiceIds	--	Choice ids selected. Used for multiple selection.	string[]	[]
choices	--	Choices to display	IChoice[]	[]
code	code	Question code	string	undefined
errorText	error_text	Error text	string	undefined
errors	--	Error messages	string[]	undefined
fieldType	field_type	Field type	string	undefined
helpText	help-text	Help text	string	undefined
isCompleted	is_completed	Is answer in complete state	boolean	false
isReadOnly	is-read-only	When true, the field will be readonly. It will display only the label and value as plain text.	boolean	false
label	label	Label to use	string	undefined
labelId	label-id	Aria label id's that describes input for screen readers	string	undefined
labelledBy	labelled-by	Labels that describe group	string	undefined
multiple	multiple	Whether to allow multi-select.	boolean	false
placeholder	placeholder	Placeholder to display	string	''
pristine	pristine	Is Pristine	boolean	true
questionId	question_id	Question Id	string	undefined
required	required	Is required	boolean	undefined
touched	touched	Is Touched	boolean	false
useAlias	use-alias	Use alias for choices	boolean	false
value	value	Current value	string	undefined

Events

Event	Description	Type
removeActiveAnswer		CustomEvent<void>
updateActiveAnswer		CustomEvent<string>
valueUpdate		CustomEvent<string[]>

Dependencies

Used by

• bp-sdk-parent-question-pool-selector
• bp-sdk-product-list
• bp-sdk-select-input-container

Depends on

• bp-sdk-errors-container

Graph

graph TD; bp-sdk-select-input --> bp-sdk-errors-container bp-sdk-errors-container --> bp-sdk-errors bp-sdk-parent-question-pool-selector --> bp-sdk-select-input bp-sdk-product-list --> bp-sdk-select-input bp-sdk-select-input-container --> bp-sdk-select-input style bp-sdk-select-input fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS