eui documentation
  1. Components
  2. EuiSncComponent

File

packages/components/eui-snc/eui-snc.component.ts

Description

Show and Conceal (SNC) component that toggles visibility of sensitive content with masked placeholder. Displays a configurable number of dots to represent hidden content length. Provides a toggle button to reveal or conceal the actual content. Commonly used for passwords, API keys, tokens, or other sensitive information that should be hidden by default. Emits visibility state changes for parent components to track or respond to content exposure.

Basic Usage

Example :
<!-- Simple password field -->
<eui-snc [dotsLength]="12" (sncToggle)="onToggle($event)">
  MySecretPassword123
</eui-snc>
Example :
onToggle(isVisible: boolean) {
  console.log('Content is now:', isVisible ? 'visible' : 'hidden');
}

Accessibility

  • Toggle button should have clear aria-label indicating show/hide action
  • Announce state changes to screen readers using aria-live regions
  • Ensure keyboard navigation works for toggle button

Notes

  • Default dotsLength is 8 characters
  • Content is hidden by default on component initialization
  • Use sncToggle event to track visibility changes for security logging

Metadata

selector eui-snc
imports EUI_BUTTON
styleUrls ./eui-snc.component.scss
templateUrl ./eui-snc.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings

Inputs

dotsLength
Default value : 8, { transform: (value: number) => Math.max(0, value) }

Number of dot characters to display when content is concealed. Represents the approximate length of the hidden content for visual consistency. Automatically clamped to minimum value of 0.

Outputs

sncToggle
Type : boolean

Emitted when the content visibility state changes via toggle button interaction. Payload: boolean indicating the new visibility state (true when content is shown, false when concealed).

HostBindings

class
Type : string
Default value : 'eui-snc'

Methods

toggleContent
toggleContent()
Returns : void

Properties

showContent
Type : WritableSignal<boolean>
Default value : signal(false)

Controls the visibility state of the concealed content. When true, displays actual content; when false, shows masked dots. Managed internally and toggled via user interaction.
string
Type : string
Default value : 'eui-snc'
Decorators :
@HostBinding('class')

results matching ""

    No results matching ""