Input component label and helper inconsistencies

[pekeler]

I'm building some forms where I sometimes need to place multiple input components in one row. I noticed that

1. Select has a different margin at the top when labelText is undefined
2. ComboBox and MultiSelect call it titleText, NumberInput calls it label, while the rest call it labelText
3. Checkbox, MultiSelect, and RadioButtonGroup are missing helperText

1 is currently the most annoying for us. (The fourth input is the Select) I'd suspect all components don't render the label tag if the value is undefined, except for Select.

Example page.svelte:

<script lang="ts">
    import {
        Checkbox,
        Column,
        ComboBox,
        DatePicker,
        DatePickerInput,
        Grid,
        MultiSelect,
        NumberInput,
        PasswordInput,
        RadioButton,
        RadioButtonGroup,
        Row,
        Select,
        SelectItem,
        TextInput
    } from 'carbon-components-svelte';

    let labelText: string | undefined = undefined;
    let helperText: string | undefined = undefined;
</script>

<Select
    labelText="label"
    on:change={(e) => {
        labelText = e.target?.value;
    }}>
    <SelectItem value={undefined} text="(undefined)" />
    <SelectItem value="&nbsp;" text="nbsp" />
    <SelectItem value="Foo" text="Foo" />
</Select>
<Select
    labelText="helper"
    on:change={(e) => {
        helperText = e.target?.value;
    }}>
    <SelectItem value={undefined} text="(undefined)" />
    <SelectItem value="&nbsp;" text="nbsp" />
    <SelectItem value="Foo" text="Foo" />
</Select>
<br />
<br />
<br />
<form>
    <Grid>
        <Row>
            <Column noGutterLeft><TextInput {labelText} {helperText}></TextInput><hr /></Column>
            <Column noGutterLeft><PasswordInput {labelText} {helperText}></PasswordInput><hr /></Column>
            <Column noGutterLeft><NumberInput label={labelText} {helperText} value={0}></NumberInput><hr /></Column>
            <Column noGutterLeft><Select {labelText} {helperText}></Select><hr /></Column>
            <Column noGutterLeft><ComboBox titleText={labelText} {helperText}></ComboBox><hr /></Column>
            <Column noGutterLeft><Checkbox {labelText}></Checkbox><hr /></Column>
            <Column noGutterLeft><DatePicker><DatePickerInput {labelText} {helperText} placeholder="mm/dd/yyyy" /></DatePicker><hr /></Column>
            <Column noGutterLeft><MultiSelect titleText={labelText} label="Select..." items={[]} /><hr /></Column>
            <Column noGutter><RadioButtonGroup legendText={labelText} name="plan" selected="free"><RadioButton labelText="Bar" value="free" /></RadioButtonGroup><hr /></Column>
        </Row>
    </Grid>
</form>