eds-kg-web-services-select

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Plain HTML

In React

In Vue

Properties

Property	Attribute	Description	Type	Default
`apiEndpoint`	`api-endpoint`	API endpoint for fetching web services Defaults to cached endpoint for better performance	`string`	`'/api/v1/kg/web-services/cached'`
`disabled`	`disabled`	Whether the field is disabled	`boolean`	`false`
`error`	`error`	Error state	`boolean`	`false`
`errorMessage`	`error-message`	Error message	`string`	`undefined`
`hint`	`hint`	Optional hint text	`string`	`undefined`
`label`	`label`	Label for the select field	`string`	`'Select Web Service'`
`message`	`message`	Optional message text	`string`	`undefined`
`name`	`name`	Name attribute for the select field	`string`	`'web-service'`
`placeholder`	`placeholder`	Placeholder text for the select field	`string`	`'Choose a web service...'`
`required`	`required`	Whether the field is required	`boolean`	`false`
`searchTerm`	`search-term`	Optional search term to filter results	`string`	`''`
`size`	`size`	Maximum number of services to fetch	`number`	`100`
`value`	`value`	Selected value (web service short_name)	`string`	`undefined`

Events

Event	Description	Type
`edschange`	Emitted when the select field value changes (change event)	`CustomEvent<{ value: string \| boolean \| string[]; }>`
`edsinput`	Emitted when the select field value changes (input event)	`CustomEvent<{ value: string \| boolean \| string[]; }>`

Dependencies

Used by

eds-form

Depends on

eds-input-field

Graph

graph TD;
  eds-kg-web-services-select --> eds-input-field
  eds-input-field --> eds-input-label
  eds-input-field --> eds-input
  eds-input-field --> eds-input-select
  eds-input-field --> eds-input-file
  eds-input-field --> eds-input-dropzone
  eds-input-field --> eds-input-search
  eds-input-field --> eds-input-range
  eds-input-field --> eds-input-footer
  eds-input --> eds-icon-wrapper
  eds-input-select --> eds-icon-wrapper
  eds-input-search --> eds-icon-wrapper
  eds-input-footer --> eds-icon-wrapper
  eds-input-footer --> eds-link
  eds-link --> eds-icon-wrapper
  eds-form --> eds-kg-web-services-select
  style eds-kg-web-services-select fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS