# Using ignition-web-ui form field components

**URL:** <https://forum.inductiveautomation.com/t/using-ignition-web-ui-form-field-components/99960>\
**Category:** Ignition 8.3 Early Access\
**Created:** [December 17, 2024, 9:16pm UTC](https://forum.inductiveautomation.com/t/using-ignition-web-ui-form-field-components/99960 "2024-12-17T21:16:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrew\_Gilbert](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@Andrew\_Gilbert](https://forum.inductiveautomation.com/u/Andrew_Gilbert)\
**Post date:** [December 17, 2024, 9:16pm UTC](https://forum.inductiveautomation.com/t/using-ignition-web-ui-form-field-components/99960/1 "2024-12-17T21:16:55Z")

</div>

Hi! I'm working on Gateway settings pages for 8.3, and I'm trying to take advantage of the components provided in the ignition-web-ui. I can get basic form fields working fine, but I'm struggling to add `<InputLabel>`s. The component doesn't seem to be exported, and loading it from a separate `@mui/material` import doesn't seem to work right: they render on top of the field.

I also notice that the fields have an `inFormControl` prop; setting that to true doesn't seem to solve the issue.

I'm doing things like

```python
<FormControl>
	<InputLabel>Label Text</InputLabel>
	<Controller
		control={control}
		name='fieldName'
		render={({ field }) => (
			<SelectInput
				label='Label Text'
				values={selectChoices}
				inFormControl={true}
				{...field}
			/>
		)}
	/>
	<FormHelperText>A text description of this component.</FormHelperText>
</FormControl>

```

I'm importing `FormHelperText` and `FormControl` from MUI, because they're not available in ignition-web-ui. I'm aware that having a duplicate copy of `@mui/material` would cause problems with the contexts; I've tried to avoid that. If what I'm doing looks sensible, I'll assume the problem's on my end.

I suspect I'm not getting the fundamental design thought of the component library; can someone point me in the right direction?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 17, 2024, 9:54pm UTC](https://forum.inductiveautomation.com/t/using-ignition-web-ui-form-field-components/99960/2 "2024-12-17T21:54:53Z")

</div>

(Not a frontend developer)

Does anything here help?

[https://files.inductiveautomation.com/sdk/storybook/earlyaccess/ignition83/ignition-web-ui/8.3.0-SNAPSHOT/index.html?path=/docs/gateway-color-palette--docs](https://files.inductiveautomation.com/sdk/storybook/earlyaccess/ignition83/ignition-web-ui/8.3.0-SNAPSHOT/index.html?path=/docs/gateway-color-palette--docs)

EDIT:  
Eh, probably not with your actual problem, only with generally knowing what components are available. I thought maybe storybook had something to help with libraries. I'll ask around.

---

<div class="post-metadata">

**Author:** ![ngomez1](https://avatars.discourse-cdn.com/v4/letter/n/3d9bf3/32.png) [@ngomez1](https://forum.inductiveautomation.com/u/ngomez1)\
**Post date:** [December 17, 2024, 10:30pm UTC](https://forum.inductiveautomation.com/t/using-ignition-web-ui-form-field-components/99960/3 "2024-12-17T22:30:53Z")

</div>

For your example, I believe you would need to adjust it to look something like this:

```python
<FormControl>
	<Controller
		control={control}
		name='fieldName'
		render={({ field }) => (
                        <React.Fragment>
                             <InputLabel>Label Text</InputLabel> (or just a div, span some element)
			    <SelectInput
				  label='Label Text'
				  values={selectChoices}
				  inFormControl={true}
				  {...field}
			    />
                            <FormHelperText>A text description of this component.</FormHelperText>
                        </React.Fragment>
		)}
	/>
</FormControl>

```

Im not sure if your taking advantage of yup as a validator and react hook forms context but a full example using our components would look something like this:

```python
const schema: yup.ObjectSchema<FieldValues> = yup.object({
    name: yup.string().required(),
});

const TestComponent = () => {
    const context = useForm({
        mode: 'onChange',
        defaultValues: { name: '' },
        resolver: yupResolver(schema),
    });

    const createPerson = (name: string) => {
        console.log(name);
    };

    const { handleSubmit } = context;

    return (
        <div>
            <Form context={context}>
                <FormControlInput
                    input={<TextInput />}
                    name="name"
                    id="name"
                    label="your Name"
                    description="some helper text"
                />
                <button onClick={handleSubmit(createPerson)}>Submit</button>
            </Form>
        </div>
    );
};

```

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [December 17, 2024, 10:31pm UTC](https://forum.inductiveautomation.com/t/using-ignition-web-ui-form-field-components/99960/4 "2024-12-17T22:31:18Z")

</div>

Hi @Andrew_Gilbert,

There should be two exported components depending on how granular you want to control your inputs. We export both `FormLabel` and `FormControlInput` from the `ignition-web-ui` library. `FormLabel` is the input label and description wrapper if you plan on opting out of our form ecosystem that uses react-hook-form under the hood. If you want do plan on opting in, you can use `FormControlInput` which is a convenience component that basically does your sample code under the hood. Here is an example:

```python
<FormControlInput
    name={'name'}
    id={'name'}
    label={'Name *'}
    disabled={disabled}
    input={<TextInput />}
    description={'Give the provider a name.'}
/>

```