# Custom Component with Localized Input

**URL:** <https://forum.builder.io/t/custom-component-with-localized-input/2189>\
**Category:** Technical Questions\
**Tags:** custom-components\
**Created:** [May 24, 2022, 7:44pm UTC](https://forum.builder.io/t/custom-component-with-localized-input/2189 "2022-05-24T19:44:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [May 24, 2022, 7:44pm UTC](https://forum.builder.io/t/custom-component-with-localized-input/2189/1 "2022-05-24T19:44:28Z")

</div>

You can enable localized input fields (beta) in your custom components by setting `localized: true`. This will return an object to your component with keys for your locales and values for the localized data. Try it out with `string`, `richText`, or `file` [input types](https://www.builder.io/c/docs/custom-react-components#input-type-examples) and more!

**Example** :

```auto
export const Heading = (props: { title: Object; }) => {

  console.log(props.title);
  // --> returns a localized object:
  // {
  // Default: "Default Heading"
  // en-CA: "CA Heading"
  // en-UK: "UK Heading"
  // en-US: "US Heading"
  // }

  const locale = 'en-US';
  return(
    <div style={{'width': '50vw'}}>
      <h1>{props.title.[locale]}</h1>
    </div>
  )
}

Builder.registerComponent(Heading, {
  name: "Heading",
  inputs: [
    {
      localized: true,
      name: "title",
      type: "text", 
      defaultValue: 'I am a heading!'
    },
  ],
});

```

 ![Screen Shot 2022-05-24 at 3.16.43 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e2433a073f795aebff452a7b73e95ea0999bdef7.png)

**Other Useful Localization Topics:**

[Custom Targeting Attributes](https://www.builder.io/c/docs/custom-targeting-attributes)  
[Intro to Localization in Builder.io](https://www.builder.io/c/docs/localization-intro)

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [September 12, 2022, 8:14pm UTC](https://forum.builder.io/t/custom-component-with-localized-input/2189/2 "2022-09-12T20:14:07Z")

</div>

**Update:**  
Starting with `v2.0.5` of the React SDK, localized inputs will resolve to the correct locale, returning the value with the type of the input type instead of an object. The above component can instead be written like so:

```auto
// Heading.tsx

export const Heading = (props: { title: string; }) => {

  return(
    <div style={{'width': '50vw'}}>
      <h1>{props.title}</h1>
    </div>
  )
}

Builder.registerComponent(Heading, {
  name: "Heading",
  inputs: [
    {
      localized: true,
      name: "title",
      type: "text", 
      defaultValue: 'I am a heading!'
    },
  ],
});

```

You will also need to pass your locale to the `locale` prop and Builder `options`:

```auto
// When fetching content
builder.get('page', {
  options: { locale },
  ...
})

// In the Builder component
<BuilderComponent model="page" content={page} locale={locale} />

```

For a video tutorial on how to set up the rest of your app for localization with Next.js take a look [here](https://forum.builder.io/t/localization-in-nextjs-server-side-break-since-2-0-3/2589/3)!