DropDown

Overview

Field for selecting an option from a possible list

Example : Default usage

import { DropDown } from '@ska-telescope/ska-gui-components';

...

<DropDown label="DropDown Label" options={DROP_DOWN_OPTIONS} testId="testId" value={DROP_DOWN_VALUE} />

Properties

Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
disabled	boolean	No	false	Disables the component if true
errorText	string	No	‘’	Displayed if there is a value and component is coloured
helperText	string	No	‘’	Displayed is there is a value
height	number	No	45	Allows for the height of the component to be adjusted
inputRef	React.MutableRefObject<any>	No		Allows the field entry to be accessed by reference if needed
label	string	Yes		Label displayed for the Component
labelBold	boolean	No	false	Label is displayed in bold unless disabled
labelPosition	LABEL_POSITION	No	CONTAINED	Allows for the positioning of the label
name	string	No		Allows for the field to be referenced and is separate to the testId
onBlue	Function	No		Function executed when the component loses focus
onFocus	Function	No		Function executed when the component is active
options		Yes		Options to be displayed for selection. See below
required	boolean	No	false	Asterisk is added to the label if true
setValue	function	No	null	Used to update the value onChange
testId	string	No	dropDown-testId	Identifier for testing purposes
toolTip	string	No		Text displayed when the cursor is hovered over the button
toolTipPlacement	string	No	bottom	Allows for the positioning of the tooltip to be moved from the default
value	string	Yes		Value that is displayed within the component

Constants

header:

“Constant”, “Values”, “Usage”

“LABEL_POSITION”, “Contained, Top, Bottom, Start, End”, “Allows for the positioning of the label”

{ label: string; value: string | number; disabled: boolean }

options

Property	Type
label	string	Test that is presented to the user
value	string | number	Value that is used when the option is selected
disabled	boolean	No	false	Indicates if the option is enabled or disabled. If missing, enabled is assumed

Testing Identifier

Provided by the property testId