# EuiSncComponent

**Type:** component



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
```html
<!-- Simple password field -->
<eui-snc [dotsLength]="12" (sncToggle)="onToggle($event)">
  MySecretPassword123
</eui-snc>
```

```typescript
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


**Selector:** `eui-snc`

## Inputs
- **dotsLength**: `undefined` - 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**: `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).