Chip

Chip components

Design Code

Example1

<nile-chip
  (nile-chip-change)="test($event)"
  [autoCompleteOptions]="['one', 'two', 'three', 'four'']"
  acceptUserInput
></nile-chip>

Example2

<nile-chip
  (nile-chip-change)="test($event)"
  [autoCompleteOptions]="['one', 'two', 'three', 'four']"
  acceptUserInput
  warning
></nile-chip>

Slots

Name Description
label The input's label. Alternatively, you can use the label attribute.
help-text Text that describes how to use the input. Alternatively, you can use the help-text attribute.

CSS Parts

Name Description
form-control The component's main form control wrapper.
form-control-label The label element for the chip component.
base The main chip container that holds the tags and input field.

Attributes & Properties

Name Description Type Default
value The current value of the input, submitted as a name/value pair with form data. array []
autoCompleteOptions Auto-complete options for the chip Array []
acceptUserInput it will accepts users input boolean ''
clearable Adds a clear button when the input is not empty. Boolean false
noWrap For wrapping up the input. Boolean false
warning Sets the input to a warning state, changing its visual appearance. Boolean false
error Sets the input to an error state, changing its visual appearance. Boolean false
loading Shows the loading icon in suffix.(does not renders the dropdown when true) boolean false
error-message Error message for nile-chip String ''
success Sets the input to a success state, changing its visual appearance. Boolean false
label The input's label. If you need to display HTML, use the label slot instead. string ''
helpText
help-text		 The chip's help text. If you need to display HTML, use the help-text slot instead. string false
disabled Disables the chip. boolean false
placeholder Placeholder text to show as a hint when the search is empty. string ''
readonly Makes the input readonly. Boolean false
disabled Makes the chip disabled. boolean false
errorIndexes An array of indices indicating which elements should have the "error" variant. array []
enableVirtualScroll Enables virtual scroll in options boolean false

Functions as Properties

Events

Name Description Type Default
filterFunction custom function to filter, should returns true or false Function (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase())
renderItemFunction Function to take in an item object and returns the property to be renderes and used as value Function (item:any)=>item
Name Description Event Detail
nile-chip-change Emitted when an alteration to the control's value is committed by the user. -

CSS Variables

Name Description Event Detail
--virtual-scroll-container-height Used to set the min width of panel width 200px
--virtual-scroll-container-width Used to set the min width of panel width 110px