---
name: New Component
about: Interested in contributing a new component to Fluent UI React? This template includes necessary information to get started, and steps to completion
---

<!-- Use this template for new components or new component variants -->

## Component details

### Description

<!-- fill this out -->

### Which product teams/scenarios need this control

<!-- The more teams/scenarios that would use this control the better chance it will get prioritized -->

### Design assets

<!-- Please provide links to redlines or screenshots of intended component design -->

### Component ownership

<!-- Are there one or more people who can help maintain this component over time? Who will address bugs? -->

## Component composition

### Imports/Dependencies

<!-- What other components/modules will your component be using -->

### Exports/Component breakdown

<!-- Consider creating smaller composable components vs a single larger one
See https://github.com/microsoft/fluentui/wiki/Component-Design#build-many-smaller-components-and-compose-them-together -->

### Intended package/s

<!-- If this is a prototype component, start in @uifabric/experiments. If you feel that there is a new package required, please indicate the requested name here. -->

## Component code

### Example code

```

```

<!-- View naming guidelines here https://github.com/microsoft/fluentui/wiki/Component-Design#naming-guidance -->

### Public methods

| Name  | Type       | Description               |
| ----- | ---------- | ------------------------- |
| focus | () => void | Sets focus on the control |

### Slots

| Name | Type | Description           |
| ---- | ---- | --------------------- |
| root | div  | The outermost element |

### Tokens

| Name      | Type  | Default Value | Description                |
| --------- | ----- | ------------- | -------------------------- |
| textColor | color | theme.white   | text color for the control |

### Props

| Name      | Type   | Default Value | Description                                 |
| --------- | ------ | ------------- | ------------------------------------------- |
| className | string |               | Optional class name to be added to the root |

## Component Progress

### Current state

### Todos

- [ ] Add Todos

### Steps

- [ ] Themable
- [ ] Unit tests
- [ ] Visual tests
- [ ] Documentation and examples
- [ ] Keyboard Accessible
- [ ] High Constrast Support
- [ ] RTL Support
- [ ] Design Review
- [ ] API review
- [ ] Public Preview
- [ ] Ready for Publishing