> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Practice React Context by building a TextField component using composition
- URL: https://reactpractice.dev/exercise/practice-react-context-by-building-a-textfield-component-using-composition/
- Published: 2025-05-19T07:48:40.000Z
- Updated: 2026-06-01T01:57:44.000Z
- Author: Corina Udrescu
- Tags: Context API, #corina-2, Exercises, Quick, #Import 2026-06-09 12:07

Build a `TextField` component that allows users to add a `Label` and `Input` to a form:

```
<TextField>
  <Label>First name</Label>
  <Input /> 
</TextField>

```

This is inspired from the [React-Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html?ref=reactpractice.dev) component and the [Shadcn FormItem](https://ui.shadcn.com/docs/components/form?ref=reactpractice.dev) component.

The component should link the `Label` and the `Input` by generating a unique id with the [useId](https://react.dev/reference/react/useId?ref=reactpractice.dev) React hook and adding the HTML `for` attribute to the label.

Here is the sample HTML output:

```
<div>
  <label htmlFor="name">First name</label>  
  <input id="name" type="text" />  
</div>

```

Use [React Context](https://react.dev/reference/react/createContext?ref=reactpractice.dev) to build your solution.

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-build-a-textfield-component-using-context-api-and-composition/) and the comments section for feedback and discussion.