---
layout: component
title: Component name (singular)
contributors: Command separated list of contributor names with (org name) following, if applicable
draft: true
intro-text: "This text provides the overall purpose and function of the component."
github-title: va-component-name - Only use this if the component is not actually a web component and thus just needs a label that matches that format.
research-title: Use this to match the label in the research repo. Only use if web-component does not match the label.
figma-link: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Examples?type=design&node-id=0%3A1&mode=design&t=3RlM8TiFaDLH4OAE-1
status: use-with-caution-available
web-component: va-component-name
anchors:
  - anchor: Examples
  - anchor: Usage
  - anchor: Code usage
  - anchor: Content considerations
  - anchor: Accessibility considerations
  - anchor: Related
  - anchor: Component checklist
---

## Examples

### Default

{% include storybook-preview.html story="components-va-component-name--default" link_text=page.web-component %}

### Variation 1

Add Storybook examples as necessary.

### Variation 2

Add Storybook examples as necessary.

## Usage

### When to use Component name

* **In this context**: Explain the scenario or user context where this component is, or could be, used.
* **In this task**: Explain the user task or tasks where this component is, or could be, used.

### When to consider something else

* **Not in this context**: Explain which scenarios or user context where this component is not, or should not, be used.
* **Not for these tasks**: Explain the user tasks where this component is not, or should not, be used.
* **Use this instead**: Explain when another component should be used instead.

### How this component works

Details the design decisions inherent to the component.

### Behavior

Describe the key interactions for this component.

* **Trigger**: What does the user do to start the interaction with this component.
* **Rules**: What rules govern how the component behaves. How does it work?
* **Feedback**: What the user sees, hears, and feels that help them understand the rules.
* **Loops and modes**: Meta rules that govern the interaction.

### Choosing between variations

Help the designer and developer understand when to choose between any variations of this component.

### Placement

Where the component appears visually, and if necessary to clarify, where it may appear in the source code. Can also comment on where the component is not to be placed.

### Design principles

* List of design or UX principles that this component is an example or or adheres to.

### Instances of this component in production

Images with captions that describe different instances of this component being used in production.

<!-- include component-example.html alt="Explain what is in the image." file="/images/components/component-name/filename.png" caption="Describe what this example image is depicting." --> 

This is the Code Usage section. Note that the header is inside this include.
<!-- include component-docs.html component_name=page.web-component  -->

## Content considerations

* Bulleted list of content related instructions to the designer.
* May be an include is shared with the Content style guide section.

## Accessibility considerations

* Bulleted list of a11y related instructions to the designer and developer.

## Related

* Links to related components.

This is the Component checklist section. Note that the header is inside this include.
<!-- include _component-checklist.html component_name=page.web-component -->