diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
index 04b3c01868..530c22f3ba 100644
--- a/example/src/Examples/TextInputExample.tsx
+++ b/example/src/Examples/TextInputExample.tsx
@@ -61,6 +61,8 @@ type AvoidingViewProps = {
   children: React.ReactNode;
 };
 
+type ExpandedId = string | number | undefined;
+
 const TextInputAvoidingView = ({ children }: AvoidingViewProps) => {
   return Platform.OS === 'ios' ? (
     <KeyboardAvoidingView
@@ -139,502 +141,541 @@ const TextInputExample = () => {
     });
   };
 
+  const [expandedId, setExpandedId] = React.useState<ExpandedId>('flat');
+
+  const onAccordionPress = (id: string | number) =>
+    setExpandedId(expandedId === id ? undefined : id);
+
   return (
     <TextInputAvoidingView>
       <ScreenWrapper
         keyboardShouldPersistTaps={'always'}
         removeClippedSubviews={false}
       >
-        <List.Section title="Flat inputs">
-          <TextInput
-            style={styles.inputContainerStyle}
-            label="Flat input"
-            placeholder="Type something"
-            value={text}
-            onChangeText={(text) => inputActionHandler('text', text)}
-            left={
-              <TextInput.Icon
-                icon="magnify"
-                color={flatLeftIcon}
-                onPress={() => {
-                  changeIconColor('flatLeftIcon');
-                }}
-              />
-            }
-            right={<TextInput.Affix text="/100" />}
-          />
-          <TextInput
-            style={styles.inputContainerStyle}
-            label="Flat input with custom icon"
-            placeholder="Type something"
-            value={customIconText}
-            onChangeText={(text) => inputActionHandler('customIconText', text)}
-            right={<TextInput.Affix text="/100" />}
-            left={
-              <TextInput.Icon
-                icon={() => (
-                  <Icon
-                    name="home"
-                    size={24}
-                    color={customIcon}
-                    onPress={() => {
-                      changeIconColor('customIcon');
-                    }}
-                  />
-                )}
-              />
-            }
-          />
-          <TextInput
-            style={[styles.inputContainerStyle, styles.fontSize]}
-            label="Flat input large font"
-            placeholder="Type something"
-            value={largeText}
-            onChangeText={(largeText) =>
-              inputActionHandler('largeText', largeText)
-            }
-            left={<TextInput.Affix text="#" />}
-            right={
-              <TextInput.Icon
-                icon="magnify"
-                color={flatRightIcon}
-                onPress={() => {
-                  changeIconColor('flatRightIcon');
-                }}
-              />
-            }
-          />
-          <TextInput
-            style={[styles.inputContainerStyle, styles.fontSize]}
-            label="Flat input large font"
-            placeholder="Type something"
-            value={flatTextPassword}
-            onChangeText={(flatTextPassword) =>
-              inputActionHandler('flatTextPassword', flatTextPassword)
-            }
-            secureTextEntry={flatTextSecureEntry}
-            right={
-              <TextInput.Icon
-                icon={flatTextSecureEntry ? 'eye' : 'eye-off'}
-                onPress={() =>
-                  dispatch({
-                    type: 'flatTextSecureEntry',
-                    payload: !flatTextSecureEntry,
-                  })
-                }
-                forceTextInputFocus={false}
-              />
-            }
-          />
-        </List.Section>
-        <List.Section title="Outline inputs">
-          <TextInput
-            mode="outlined"
-            style={styles.inputContainerStyle}
-            label="Outlined input"
-            placeholder="Type something"
-            value={outlinedText}
-            onChangeText={(outlinedText) =>
-              inputActionHandler('outlinedText', outlinedText)
-            }
-            left={
-              <TextInput.Icon
-                icon="magnify"
-                color={outlineLeftIcon}
-                onPress={() => {
-                  changeIconColor('outlineLeftIcon');
-                }}
-              />
-            }
-            right={<TextInput.Affix text="/100" />}
-          />
-          <TextInput
-            mode="outlined"
-            style={[styles.inputContainerStyle, styles.fontSize]}
-            label="Outlined large font"
-            placeholder="Type something"
-            value={outlinedLargeText}
-            onChangeText={(outlinedLargeText) =>
-              inputActionHandler('outlinedLargeText', outlinedLargeText)
-            }
-            left={<TextInput.Affix text="$" />}
-            right={
-              <TextInput.Icon
-                icon="magnify"
-                color={outlineRightIcon}
-                onPress={() => {
-                  changeIconColor('outlineRightIcon');
-                }}
-              />
-            }
-          />
-          <TextInput
-            mode="outlined"
-            style={[styles.inputContainerStyle, styles.fontSize]}
-            label="Outlined large font"
-            placeholder="Type something"
-            value={outlinedTextPassword}
-            onChangeText={(outlinedTextPassword) =>
-              inputActionHandler('outlinedTextPassword', outlinedTextPassword)
-            }
-            secureTextEntry={outlineTextSecureEntry}
-            right={
-              <TextInput.Icon
-                icon={outlineTextSecureEntry ? 'eye-off' : 'eye'}
-                onPress={() =>
-                  dispatch({
-                    type: 'outlineTextSecureEntry',
-                    payload: !outlineTextSecureEntry,
-                  })
-                }
-              />
-            }
-          />
-        </List.Section>
-        <List.Section title="Disabled inputs">
-          <TextInput
-            disabled
-            style={styles.inputContainerStyle}
-            label="Disabled flat input"
-          />
-          <TextInput
-            disabled
-            style={styles.inputContainerStyle}
-            label="Disabled flat input with value"
-            value="Disabled flat input value"
-          />
-          <TextInput
-            style={styles.inputContainerStyle}
-            label="Flat input"
-            disabled
-            value="Disabled flat input with adornments"
-            left={
-              <TextInput.Icon
-                icon="magnify"
-                color={flatLeftIcon}
-                onPress={() => {
-                  changeIconColor('flatLeftIcon');
-                }}
-              />
-            }
-            right={<TextInput.Affix text="/100" />}
-          />
-          <TextInput
-            mode="outlined"
-            disabled
-            style={styles.inputContainerStyle}
-            label="Disabled outlined input"
-          />
-          <TextInput
-            mode="outlined"
-            disabled
-            style={styles.inputContainerStyle}
-            label="Disabled outlined input"
-            value="Disabled outlined input with value"
-          />
-          <TextInput
-            style={styles.inputContainerStyle}
-            label="Flat input"
-            disabled
-            mode="outlined"
-            value="Disabled flat input with adornments"
-            left={
-              <TextInput.Icon
-                icon="magnify"
-                color={flatLeftIcon}
-                onPress={() => {
-                  changeIconColor('flatLeftIcon');
-                }}
-              />
-            }
-            right={<TextInput.Affix text="/100" />}
-          />
-        </List.Section>
-        <List.Section title="Dense inputs">
-          <TextInput
-            style={styles.inputContainerStyle}
-            dense
-            label="Dense flat input"
-            placeholder="Type something"
-            value={flatDenseText}
-            onChangeText={(flatDenseText) =>
-              inputActionHandler('flatDenseText', flatDenseText)
-            }
-            left={<TextInput.Affix text="#" />}
-            right={
-              <TextInput.Icon
-                icon="chevron-up"
-                color={(focused) =>
-                  focused ? theme.colors?.primary : undefined
-                }
-              />
-            }
-          />
-          <TextInput
-            style={styles.inputContainerStyle}
-            dense
-            placeholder="Dense flat input without label"
-            value={flatDense}
-            onChangeText={(flatDense) =>
-              inputActionHandler('flatDense', flatDense)
-            }
-          />
-          <TextInput
-            mode="outlined"
-            style={styles.inputContainerStyle}
-            dense
-            label="Dense outlined input"
-            placeholder="Type something"
-            value={outlinedDenseText}
-            onChangeText={(outlinedDenseText) =>
-              inputActionHandler('outlinedDenseText', outlinedDenseText)
-            }
-            left={<TextInput.Affix text="$" />}
-          />
-          <TextInput
-            mode="outlined"
-            style={styles.inputContainerStyle}
-            dense
-            placeholder="Dense outlined input without label"
-            value={outlinedDense}
-            onChangeText={(outlinedDense) =>
-              inputActionHandler('outlinedDense', outlinedDense)
-            }
-          />
-        </List.Section>
-        <List.Section title="Multiline inputs">
-          <TextInput
-            style={styles.inputContainerStyle}
-            label="Flat input multiline"
-            multiline
-            placeholder="Type something"
-            value={flatMultiline}
-            onChangeText={(flatMultiline) =>
-              inputActionHandler('flatMultiline', flatMultiline)
-            }
-          />
-          <TextInput
-            style={[styles.inputContainerStyle, styles.textArea]}
-            label="Flat input text area"
-            multiline
-            placeholder="Type something"
-            value={flatTextArea}
-            onChangeText={(flatTextArea) =>
-              inputActionHandler('flatTextArea', flatTextArea)
-            }
-          />
-          <View style={styles.inputContainerStyle}>
+        <List.AccordionGroup
+          expandedId={expandedId}
+          onAccordionPress={onAccordionPress}
+        >
+          <List.Accordion title="Flat inputs" id="flat">
             <TextInput
-              mode="flat"
-              label="Flat multiline text input with fixed height"
-              multiline
-              style={styles.fixedHeight}
+              style={styles.inputContainerStyle}
+              label="Flat input"
+              placeholder="Type something"
+              value={text}
+              onChangeText={(text) => inputActionHandler('text', text)}
+              left={
+                <TextInput.Icon
+                  icon="magnify"
+                  color={flatLeftIcon}
+                  onPress={() => {
+                    changeIconColor('flatLeftIcon');
+                  }}
+                />
+              }
+              maxLength={100}
+              right={<TextInput.Affix text={`${text.length}/100`} />}
+            />
+            <TextInput
+              style={styles.inputContainerStyle}
+              label="Flat input with custom icon"
+              placeholder="Type something"
+              value={customIconText}
+              onChangeText={(text) =>
+                inputActionHandler('customIconText', text)
+              }
+              maxLength={100}
+              right={<TextInput.Affix text={`${customIconText.length}/100`} />}
+              left={
+                <TextInput.Icon
+                  icon={() => (
+                    <Icon
+                      name="home"
+                      size={24}
+                      color={customIcon}
+                      onPress={() => {
+                        changeIconColor('customIcon');
+                      }}
+                    />
+                  )}
+                />
+              }
+            />
+            <TextInput
+              style={[styles.inputContainerStyle, styles.fontSize]}
+              label="Flat input large font"
+              placeholder="Type something"
+              value={largeText}
+              onChangeText={(largeText) =>
+                inputActionHandler('largeText', largeText)
+              }
+              left={<TextInput.Affix text="#" />}
+              right={
+                <TextInput.Icon
+                  icon="magnify"
+                  color={flatRightIcon}
+                  onPress={() => {
+                    changeIconColor('flatRightIcon');
+                  }}
+                />
+              }
+            />
+            <TextInput
+              style={[styles.inputContainerStyle, styles.fontSize]}
+              label="Flat input large font"
+              placeholder="Type something"
+              value={flatTextPassword}
+              onChangeText={(flatTextPassword) =>
+                inputActionHandler('flatTextPassword', flatTextPassword)
+              }
+              secureTextEntry={flatTextSecureEntry}
+              right={
+                <TextInput.Icon
+                  icon={flatTextSecureEntry ? 'eye' : 'eye-off'}
+                  onPress={() =>
+                    dispatch({
+                      type: 'flatTextSecureEntry',
+                      payload: !flatTextSecureEntry,
+                    })
+                  }
+                  forceTextInputFocus={false}
+                />
+              }
             />
-          </View>
-          <TextInput
-            mode="outlined"
-            style={styles.inputContainerStyle}
-            label="Outlined input multiline"
-            multiline
-            placeholder="Type something"
-            value={outlinedMultiline}
-            onChangeText={(outlinedMultiline) =>
-              inputActionHandler('outlinedMultiline', outlinedMultiline)
-            }
-          />
-          <TextInput
-            mode="outlined"
-            style={[styles.inputContainerStyle, styles.textArea]}
-            label="Outlined input text area"
-            multiline
-            placeholder="Type something"
-            value={outlinedTextArea}
-            onChangeText={(outlinedTextArea) =>
-              inputActionHandler('outlinedTextArea', outlinedTextArea)
-            }
-          />
-          <View style={styles.inputContainerStyle}>
+          </List.Accordion>
+          <List.Accordion title="Outlined inputs" id="outlined">
             <TextInput
               mode="outlined"
-              label="Outlined multiline text input with fixed height"
-              multiline
-              style={styles.fixedHeight}
+              style={styles.inputContainerStyle}
+              label="Outlined input"
+              placeholder="Type something"
+              value={outlinedText}
+              onChangeText={(outlinedText) =>
+                inputActionHandler('outlinedText', outlinedText)
+              }
+              left={
+                <TextInput.Icon
+                  icon="magnify"
+                  color={outlineLeftIcon}
+                  onPress={() => {
+                    changeIconColor('outlineLeftIcon');
+                  }}
+                />
+              }
+              maxLength={100}
+              right={<TextInput.Affix text={`${outlinedText.length}/100`} />}
+            />
+            <TextInput
+              mode="outlined"
+              style={[styles.inputContainerStyle, styles.fontSize]}
+              label="Outlined large font"
+              placeholder="Type something"
+              value={outlinedLargeText}
+              onChangeText={(outlinedLargeText) =>
+                inputActionHandler('outlinedLargeText', outlinedLargeText)
+              }
+              left={<TextInput.Affix text="$" />}
+              right={
+                <TextInput.Icon
+                  icon="magnify"
+                  color={outlineRightIcon}
+                  onPress={() => {
+                    changeIconColor('outlineRightIcon');
+                  }}
+                />
+              }
             />
-          </View>
-        </List.Section>
-        <List.Section title="Inputs with helpers">
-          <View style={styles.inputContainerStyle}>
             <TextInput
-              label="Input with helper text"
-              placeholder="Enter username, only letters"
-              value={name}
-              error={!_isUsernameValid(name)}
-              onChangeText={(name) => inputActionHandler('name', name)}
+              mode="outlined"
+              style={[styles.inputContainerStyle, styles.fontSize]}
+              label="Outlined large font"
+              placeholder="Type something"
+              value={outlinedTextPassword}
+              onChangeText={(outlinedTextPassword) =>
+                inputActionHandler('outlinedTextPassword', outlinedTextPassword)
+              }
+              secureTextEntry={outlineTextSecureEntry}
+              right={
+                <TextInput.Icon
+                  icon={outlineTextSecureEntry ? 'eye' : 'eye-off'}
+                  onPress={() =>
+                    dispatch({
+                      type: 'outlineTextSecureEntry',
+                      payload: !outlineTextSecureEntry,
+                    })
+                  }
+                />
+              }
             />
-            <HelperText type="error" visible={!_isUsernameValid(name)}>
-              Error: Only letters are allowed
-            </HelperText>
-          </View>
-          <View style={styles.inputContainerStyle}>
+          </List.Accordion>
+          <List.Accordion title="Disabled inputs" id="disabled">
             <TextInput
-              label="Input with helper text and character counter"
-              placeholder="Enter username, only letters"
-              value={maxLengthName}
-              error={!_isUsernameValid(maxLengthName)}
-              onChangeText={(maxLengthName) =>
-                inputActionHandler('maxLengthName', maxLengthName)
-              }
-              maxLength={MAX_LENGTH}
+              disabled
+              style={styles.inputContainerStyle}
+              label="Disabled flat input"
             />
-            <View style={styles.helpersWrapper}>
-              <HelperText
-                type="error"
-                visible={!_isUsernameValid(maxLengthName)}
-                style={styles.helper}
-              >
-                Error: Numbers and special characters are not allowed
-              </HelperText>
-              <HelperText type="info" visible style={styles.counterHelper}>
-                {maxLengthName.length} / {MAX_LENGTH}
-              </HelperText>
-            </View>
-          </View>
-          <View style={styles.inputContainerStyle}>
             <TextInput
-              label={
-                <Text>
-                  <Text
-                    style={{
-                      color: theme.isV3 ? MD3Colors.error50 : MD2Colors.red500,
-                    }}
-                  >
-                    *
-                  </Text>{' '}
-                  Label as component
-                </Text>
-              }
-              style={styles.noPaddingInput}
-              placeholder="Enter username, required"
-              value={nameRequired}
-              error={!nameRequired}
-              onChangeText={(nameRequired) =>
-                inputActionHandler('nameRequired', nameRequired)
+              disabled
+              style={styles.inputContainerStyle}
+              label="Disabled flat input with value"
+              value="Disabled flat input value"
+            />
+            <TextInput
+              style={styles.inputContainerStyle}
+              label="Flat input"
+              disabled
+              value="Disabled flat input with adornments"
+              left={
+                <TextInput.Icon
+                  icon="magnify"
+                  color={flatLeftIcon}
+                  onPress={() => {
+                    changeIconColor('flatLeftIcon');
+                  }}
+                />
               }
+              right={<TextInput.Affix text="/100" />}
+            />
+            <TextInput
+              mode="outlined"
+              disabled
+              style={styles.inputContainerStyle}
+              label="Disabled outlined input"
+            />
+            <TextInput
+              mode="outlined"
+              disabled
+              style={styles.inputContainerStyle}
+              label="Disabled outlined input"
+              value="Disabled outlined input with value"
             />
-            <HelperText type="error" padding="none" visible={!nameRequired}>
-              Error: Username is required
-            </HelperText>
-          </View>
-        </List.Section>
-        <List.Section title="Custom inputs">
-          <TextInput
-            style={styles.inputContainerStyle}
-            label="Flat input with custom underline colors"
-            placeholder="Type something"
-            value={flatUnderlineColors}
-            onChangeText={(flatUnderlineColors) =>
-              inputActionHandler('flatUnderlineColors', flatUnderlineColors)
-            }
-            underlineColor={
-              theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400
-            }
-            activeUnderlineColor={
-              theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900
-            }
-          />
-          <TextInput
-            mode="outlined"
-            style={styles.inputContainerStyle}
-            label="Outlined input with custom outline colors"
-            placeholder="Type something"
-            value={outlinedColors}
-            onChangeText={(outlinedColors) =>
-              inputActionHandler('outlinedColors', outlinedColors)
-            }
-            outlineColor={theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400}
-            activeOutlineColor={
-              theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900
-            }
-          />
-          <TextInput
-            mode="outlined"
-            style={styles.inputContainerStyle}
-            label="Outlined with super long label which is truncating at some point"
-            placeholder="Type something"
-            onChangeText={(outlinedLongLabel) =>
-              inputActionHandler('outlinedLongLabel', outlinedLongLabel)
-            }
-          />
-
-          <TextInput
-            mode="flat"
-            style={styles.inputContainerStyle}
-            label="Custom style input"
-            placeholder="Input with custom style"
-            value={customStyleText}
-            onChangeText={(customStyleText) =>
-              inputActionHandler('customStyleText', customStyleText)
-            }
-            contentStyle={styles.inputContentStyle}
-          />
-
-          <View style={styles.inputContainerStyle}>
             <TextInput
-              label="Input with no padding"
-              style={styles.noPaddingInput}
-              placeholder="Enter username, only letters"
-              value={nameNoPadding}
-              error={!_isUsernameValid(nameNoPadding)}
-              onChangeText={(nameNoPadding) =>
-                inputActionHandler('nameNoPadding', nameNoPadding)
+              style={styles.inputContainerStyle}
+              label="Flat input"
+              disabled
+              mode="outlined"
+              value="Disabled flat input with adornments"
+              left={
+                <TextInput.Icon
+                  icon="magnify"
+                  color={flatLeftIcon}
+                  onPress={() => {
+                    changeIconColor('flatLeftIcon');
+                  }}
+                />
               }
+              right={<TextInput.Affix text="/100" />}
             />
-            <HelperText
-              type="error"
-              padding="none"
-              visible={!_isUsernameValid(nameNoPadding)}
-            >
-              Error: Only letters are allowed
-            </HelperText>
-          </View>
-
-          <View style={styles.inputContainerStyle}>
+          </List.Accordion>
+          <List.Accordion title="Dense inputs" id="dense">
+            <TextInput
+              style={styles.inputContainerStyle}
+              dense
+              label="Dense flat input"
+              placeholder="Type something"
+              value={flatDenseText}
+              onChangeText={(flatDenseText) =>
+                inputActionHandler('flatDenseText', flatDenseText)
+              }
+              left={<TextInput.Affix text="#" />}
+              right={
+                <TextInput.Icon
+                  icon="chevron-up"
+                  color={(focused) =>
+                    focused ? theme.colors?.primary : undefined
+                  }
+                />
+              }
+            />
+            <TextInput
+              style={styles.inputContainerStyle}
+              dense
+              placeholder="Dense flat input without label"
+              value={flatDense}
+              onChangeText={(flatDense) =>
+                inputActionHandler('flatDense', flatDense)
+              }
+            />
+            <TextInput
+              mode="outlined"
+              style={styles.inputContainerStyle}
+              dense
+              label="Dense outlined input"
+              placeholder="Type something"
+              value={outlinedDenseText}
+              onChangeText={(outlinedDenseText) =>
+                inputActionHandler('outlinedDenseText', outlinedDenseText)
+              }
+              left={<TextInput.Affix text="$" />}
+            />
+            <TextInput
+              mode="outlined"
+              style={styles.inputContainerStyle}
+              dense
+              placeholder="Dense outlined input without label"
+              value={outlinedDense}
+              onChangeText={(outlinedDense) =>
+                inputActionHandler('outlinedDense', outlinedDense)
+              }
+            />
+          </List.Accordion>
+          <List.Accordion title="Multiline inputs" id="multiline">
             <TextInput
-              label="Input with text align center"
-              style={styles.centeredText}
+              style={styles.inputContainerStyle}
+              label="Flat input multiline"
+              multiline
+              placeholder="Type something"
+              value={flatMultiline}
+              onChangeText={(flatMultiline) =>
+                inputActionHandler('flatMultiline', flatMultiline)
+              }
             />
-          </View>
-          <View style={styles.inputContainerStyle}>
+            <TextInput
+              style={[styles.inputContainerStyle, styles.textArea]}
+              label="Flat input text area"
+              multiline
+              placeholder="Type something"
+              value={flatTextArea}
+              onChangeText={(flatTextArea) =>
+                inputActionHandler('flatTextArea', flatTextArea)
+              }
+            />
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                mode="flat"
+                label="Flat multiline text input with fixed height"
+                multiline
+                style={styles.fixedHeight}
+              />
+            </View>
             <TextInput
               mode="outlined"
-              label="Outlined input with text align center"
-              style={styles.centeredText}
+              style={styles.inputContainerStyle}
+              label="Outlined input multiline"
+              multiline
+              placeholder="Type something"
+              value={outlinedMultiline}
+              onChangeText={(outlinedMultiline) =>
+                inputActionHandler('outlinedMultiline', outlinedMultiline)
+              }
             />
-          </View>
-          <View style={styles.inputContainerStyle}>
             <TextInput
               mode="outlined"
-              theme={{
-                roundness: 25,
-              }}
-              label="Outlined text input with custom roundness"
+              style={[styles.inputContainerStyle, styles.textArea]}
+              label="Outlined input text area"
+              multiline
+              placeholder="Type something"
+              value={outlinedTextArea}
+              onChangeText={(outlinedTextArea) =>
+                inputActionHandler('outlinedTextArea', outlinedTextArea)
+              }
+            />
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                mode="outlined"
+                label="Outlined multiline text input with fixed height"
+                multiline
+                style={styles.fixedHeight}
+              />
+            </View>
+          </List.Accordion>
+          <List.Accordion title="Inputs with helpers" id="withAddons">
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                label="Input with helper text"
+                placeholder="Enter username, only letters"
+                value={name}
+                error={!_isUsernameValid(name)}
+                onChangeText={(name) => inputActionHandler('name', name)}
+              />
+              <HelperText type="error" visible={!_isUsernameValid(name)}>
+                Error: Only letters are allowed
+              </HelperText>
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                label="Input with helper text and character counter"
+                placeholder="Enter username, only letters"
+                value={maxLengthName}
+                error={!_isUsernameValid(maxLengthName)}
+                onChangeText={(maxLengthName) =>
+                  inputActionHandler('maxLengthName', maxLengthName)
+                }
+                maxLength={MAX_LENGTH}
+              />
+              <View style={styles.helpersWrapper}>
+                <HelperText
+                  type="error"
+                  visible={!_isUsernameValid(maxLengthName)}
+                  style={styles.helper}
+                >
+                  Error: Numbers and special characters are not allowed
+                </HelperText>
+                <HelperText type="info" visible style={styles.counterHelper}>
+                  {maxLengthName.length} / {MAX_LENGTH}
+                </HelperText>
+              </View>
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                label={
+                  <Text>
+                    <Text
+                      style={{
+                        color: theme.isV3
+                          ? MD3Colors.error50
+                          : MD2Colors.red500,
+                      }}
+                    >
+                      *
+                    </Text>{' '}
+                    Label as component
+                  </Text>
+                }
+                style={styles.noPaddingInput}
+                placeholder="Enter username, required"
+                value={nameRequired}
+                error={!nameRequired}
+                onChangeText={(nameRequired) =>
+                  inputActionHandler('nameRequired', nameRequired)
+                }
+              />
+              <HelperText type="error" padding="none" visible={!nameRequired}>
+                Error: Username is required
+              </HelperText>
+            </View>
+          </List.Accordion>
+          <List.Accordion title="Custom inputs" id="custom">
+            <TextInput
+              style={styles.inputContainerStyle}
+              label="Flat input with custom underline colors"
+              placeholder="Type something"
+              value={flatUnderlineColors}
+              onChangeText={(flatUnderlineColors) =>
+                inputActionHandler('flatUnderlineColors', flatUnderlineColors)
+              }
+              underlineColor={
+                theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400
+              }
+              activeUnderlineColor={
+                theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900
+              }
             />
-          </View>
-          <View style={styles.inputContainerStyle}>
             <TextInput
               mode="outlined"
-              label="Outlined text input without roundness"
-              theme={{ roundness: 0 }}
+              style={styles.inputContainerStyle}
+              label="Outlined input with custom outline colors"
+              placeholder="Type something"
+              value={outlinedColors}
+              onChangeText={(outlinedColors) =>
+                inputActionHandler('outlinedColors', outlinedColors)
+              }
+              outlineColor={
+                theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400
+              }
+              activeOutlineColor={
+                theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900
+              }
             />
-          </View>
-          <View style={styles.inputContainerStyle}>
             <TextInput
               mode="outlined"
-              label="Outlined text input with error"
-              error
+              style={styles.inputContainerStyle}
+              label="Outlined with super long label which is truncating at some point"
+              placeholder="Type something"
+              onChangeText={(outlinedLongLabel) =>
+                inputActionHandler('outlinedLongLabel', outlinedLongLabel)
+              }
+            />
+
+            <TextInput
+              mode="flat"
+              style={styles.inputContainerStyle}
+              label="Custom style input"
+              placeholder="Input with custom style"
+              value={customStyleText}
+              onChangeText={(customStyleText) =>
+                inputActionHandler('customStyleText', customStyleText)
+              }
+              contentStyle={styles.inputContentStyle}
             />
-          </View>
-        </List.Section>
+
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                label="Input with no padding"
+                style={styles.noPaddingInput}
+                placeholder="Enter username, only letters"
+                value={nameNoPadding}
+                error={!_isUsernameValid(nameNoPadding)}
+                onChangeText={(nameNoPadding) =>
+                  inputActionHandler('nameNoPadding', nameNoPadding)
+                }
+              />
+              <HelperText
+                type="error"
+                padding="none"
+                visible={!_isUsernameValid(nameNoPadding)}
+              >
+                Error: Only letters are allowed
+              </HelperText>
+            </View>
+
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                label="Input with text align center"
+                style={styles.centeredText}
+                activeUnderlineColor="transparent"
+              />
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                mode="outlined"
+                label="Outlined input with text align center"
+                style={styles.centeredText}
+              />
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                mode="outlined"
+                theme={{
+                  roundness: 25,
+                }}
+                label="Outlined text input with custom roundness"
+              />
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                mode="outlined"
+                label="Outlined text input without roundness"
+                theme={{ roundness: 0 }}
+              />
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                mode="outlined"
+                label="Outlined text input with error"
+                error
+              />
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                mode="outlined"
+                label="Outlined input with custom cursor and selection colors"
+                selectionColor={'rgba(0,255,1,0.5)'}
+                cursorColor={'rgba(255,1,1,1)'}
+                placeholderTextColor={'rgba(255,0,125,1)'}
+                placeholder="Custom colors"
+              />
+            </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput
+                label="Flat input with custom cursor and selection colors"
+                selectionColor={'rgba(0,255,1,0.5)'}
+                cursorColor={'rgba(255,1,1,1)'}
+                placeholderTextColor={'rgba(255,0,125,1)'}
+                placeholder="Custom colors"
+              />
+            </View>
+          </List.Accordion>
+        </List.AccordionGroup>
       </ScreenWrapper>
     </TextInputAvoidingView>
   );
diff --git a/src/components/TextInput/Addons/Outline.tsx b/src/components/TextInput/Addons/Outline.tsx
new file mode 100644
index 0000000000..4529f5992e
--- /dev/null
+++ b/src/components/TextInput/Addons/Outline.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  ColorValue,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+type OutlineProps = {
+  isV3: boolean;
+  activeColor: string;
+  backgroundColor: ColorValue;
+  hasActiveOutline?: boolean;
+  focused?: boolean;
+  outlineColor?: string;
+  roundness?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const Outline = ({
+  isV3,
+  activeColor,
+  backgroundColor,
+  hasActiveOutline,
+  focused,
+  outlineColor,
+  roundness,
+  style,
+}: OutlineProps) => (
+  <View
+    testID="text-input-outline"
+    pointerEvents="none"
+    style={[
+      styles.outline,
+      // eslint-disable-next-line react-native/no-inline-styles
+      {
+        backgroundColor,
+        borderRadius: roundness,
+        borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
+        borderColor: hasActiveOutline ? activeColor : outlineColor,
+      },
+      style,
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 6,
+    bottom: 0,
+  },
+});
diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx
new file mode 100644
index 0000000000..184cbe63b5
--- /dev/null
+++ b/src/components/TextInput/Addons/Underline.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+
+import type { ThemeProp } from 'src/types';
+
+import { useInternalTheme } from '../../../core/theming';
+
+type UnderlineProps = {
+  parentState: {
+    focused: boolean;
+  };
+  error?: boolean;
+  colors?: {
+    error?: string;
+  };
+  activeColor: string;
+  underlineColorCustom?: string;
+  hasActiveOutline?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeProp;
+};
+
+export const Underline = ({
+  parentState,
+  error,
+  colors,
+  activeColor,
+  underlineColorCustom,
+  hasActiveOutline,
+  style,
+  theme: themeOverrides,
+}: UnderlineProps) => {
+  const { isV3 } = useInternalTheme(themeOverrides);
+
+  let backgroundColor = parentState.focused
+    ? activeColor
+    : underlineColorCustom;
+
+  if (error) backgroundColor = colors?.error;
+
+  const activeScale = isV3 ? 2 : 1;
+
+  return (
+    <Animated.View
+      testID="text-input-underline"
+      style={[
+        styles.underline,
+        isV3 && styles.md3Underline,
+        {
+          backgroundColor,
+          // Underlines is thinner when input is not focused
+          transform: [
+            {
+              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
+                ? activeScale
+                : 0.5,
+            },
+          ],
+        },
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  underline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 2,
+    zIndex: 1,
+  },
+  md3Underline: {
+    height: 1,
+  },
+});
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
index 42d640e859..9ee30fac79 100644
--- a/src/components/TextInput/TextInputFlat.tsx
+++ b/src/components/TextInput/TextInputFlat.tsx
@@ -1,19 +1,14 @@
 import * as React from 'react';
 import {
-  Animated,
   I18nManager,
   Platform,
-  StyleProp,
   StyleSheet,
   TextInput as NativeTextInput,
   TextStyle,
   View,
-  ViewStyle,
 } from 'react-native';
 
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../core/theming';
+import { Underline } from './Addons/Underline';
 import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums';
 import TextInputAdornment, {
   TextInputAdornmentProps,
@@ -51,7 +46,7 @@ const TextInputFlat = ({
   editable = true,
   label,
   error = false,
-  selectionColor,
+  selectionColor: customSelectionColor,
   cursorColor,
   underlineColor,
   underlineStyle,
@@ -143,9 +138,11 @@ const TextInputFlat = ({
     placeholderColor,
     errorColor,
     backgroundColor,
+    selectionColor,
   } = getFlatInputColors({
     underlineColor,
     activeUnderlineColor,
+    customSelectionColor,
     textColor,
     disabled,
     error,
@@ -372,29 +369,26 @@ const TextInputFlat = ({
           />
         ) : null}
         {render?.({
-          testID,
           ...rest,
           ref: innerRef,
           onChangeText,
           placeholder: label ? parentState.placeholder : rest.placeholder,
-          placeholderTextColor: placeholderTextColor ?? placeholderColor,
           editable: !disabled && editable,
-          selectionColor:
-            typeof selectionColor === 'undefined'
-              ? activeColor
-              : selectionColor,
+          selectionColor,
           cursorColor:
             typeof cursorColor === 'undefined' ? activeColor : cursorColor,
+          placeholderTextColor: placeholderTextColor ?? placeholderColor,
           onFocus,
           onBlur,
           underlineColorAndroid: 'transparent',
           multiline,
           style: [
             styles.input,
-            { paddingLeft, paddingRight },
             !multiline || (multiline && height) ? { height: flatHeight } : {},
             paddingFlat,
             {
+              paddingLeft,
+              paddingRight,
               ...font,
               fontSize,
               lineHeight,
@@ -411,6 +405,7 @@ const TextInputFlat = ({
             adornmentStyleAdjustmentForNativeInput,
             contentStyle,
           ],
+          testID,
         })}
       </View>
       <TextInputAdornment {...adornmentProps} />
@@ -420,80 +415,11 @@ const TextInputFlat = ({
 
 export default TextInputFlat;
 
-type UnderlineProps = {
-  parentState: {
-    focused: boolean;
-  };
-  error?: boolean;
-  colors?: {
-    error?: string;
-  };
-  activeColor: string;
-  underlineColorCustom?: string;
-  hasActiveOutline?: boolean;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-};
-
-const Underline = ({
-  parentState,
-  error,
-  colors,
-  activeColor,
-  underlineColorCustom,
-  hasActiveOutline,
-  style,
-  theme: themeOverrides,
-}: UnderlineProps) => {
-  const { isV3 } = useInternalTheme(themeOverrides);
-
-  let backgroundColor = parentState.focused
-    ? activeColor
-    : underlineColorCustom;
-
-  if (error) backgroundColor = colors?.error;
-
-  const activeScale = isV3 ? 2 : 1;
-
-  return (
-    <Animated.View
-      testID="text-input-underline"
-      style={[
-        styles.underline,
-        isV3 && styles.md3Underline,
-        {
-          backgroundColor,
-          // Underlines is thinner when input is not focused
-          transform: [
-            {
-              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
-                ? activeScale
-                : 0.5,
-            },
-          ],
-        },
-        style,
-      ]}
-    />
-  );
-};
-
 const styles = StyleSheet.create({
   placeholder: {
     position: 'absolute',
     left: 0,
   },
-  underline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: 2,
-    zIndex: 1,
-  },
-  md3Underline: {
-    height: 1,
-  },
   labelContainer: {
     paddingTop: 0,
     paddingBottom: 0,
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index bee0a2dce0..80d8adcae7 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/src/components/TextInput/TextInputOutlined.tsx
@@ -7,10 +7,9 @@ import {
   Platform,
   TextStyle,
   ColorValue,
-  StyleProp,
-  ViewStyle,
 } from 'react-native';
 
+import { Outline } from './Addons/Outline';
 import { AdornmentType, AdornmentSide } from './Adornment/enums';
 import TextInputAdornment, {
   getAdornmentConfig,
@@ -46,7 +45,7 @@ const TextInputOutlined = ({
   editable = true,
   label,
   error = false,
-  selectionColor,
+  selectionColor: customSelectionColor,
   cursorColor,
   underlineColor: _underlineColor,
   outlineColor: customOutlineColor,
@@ -100,9 +99,11 @@ const TextInputOutlined = ({
     outlineColor,
     placeholderColor,
     errorColor,
+    selectionColor,
   } = getOutlinedInputColors({
     activeOutlineColor,
     customOutlineColor,
+    customSelectionColor,
     textColor,
     disabled,
     error,
@@ -338,19 +339,15 @@ const TextInputOutlined = ({
             />
           ) : null}
           {render?.({
-            testID,
             ...rest,
             ref: innerRef,
             onChangeText,
             placeholder: label ? parentState.placeholder : rest.placeholder,
-            placeholderTextColor: placeholderTextColor || placeholderColor,
             editable: !disabled && editable,
-            selectionColor:
-              typeof selectionColor === 'undefined'
-                ? activeColor
-                : selectionColor,
+            selectionColor,
             cursorColor:
               typeof cursorColor === 'undefined' ? activeColor : cursorColor,
+            placeholderTextColor: placeholderTextColor || placeholderColor,
             onFocus,
             onBlur,
             underlineColorAndroid: 'transparent',
@@ -379,6 +376,7 @@ const TextInputOutlined = ({
               adornmentStyleAdjustmentForNativeInput,
               contentStyle,
             ],
+            testID,
           } as RenderProps)}
         </View>
         <TextInputAdornment {...adornmentProps} />
@@ -389,52 +387,7 @@ const TextInputOutlined = ({
 
 export default TextInputOutlined;
 
-type OutlineProps = {
-  isV3: boolean;
-  activeColor: string;
-  backgroundColor: ColorValue;
-  hasActiveOutline?: boolean;
-  focused?: boolean;
-  outlineColor?: string;
-  roundness?: number;
-  style?: StyleProp<ViewStyle>;
-};
-
-const Outline = ({
-  isV3,
-  activeColor,
-  backgroundColor,
-  hasActiveOutline,
-  focused,
-  outlineColor,
-  roundness,
-  style,
-}: OutlineProps) => (
-  <View
-    testID="text-input-outline"
-    pointerEvents="none"
-    style={[
-      styles.outline,
-      // eslint-disable-next-line react-native/no-inline-styles
-      {
-        backgroundColor,
-        borderRadius: roundness,
-        borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
-        borderColor: hasActiveOutline ? activeColor : outlineColor,
-      },
-      style,
-    ]}
-  />
-);
-
 const styles = StyleSheet.create({
-  outline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 6,
-    bottom: 0,
-  },
   labelContainer: {
     paddingBottom: 0,
   },
diff --git a/src/components/TextInput/helpers.tsx b/src/components/TextInput/helpers.tsx
index 291e1e40d7..9522bcfa25 100644
--- a/src/components/TextInput/helpers.tsx
+++ b/src/components/TextInput/helpers.tsx
@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import color from 'color';
 
 import type { InternalTheme } from '../../types';
@@ -389,6 +391,24 @@ const getPlaceholderColor = ({ theme, disabled }: BaseProps) => {
   return theme.colors.placeholder;
 };
 
+const getSelectionColor = ({
+  activeColor,
+  customSelectionColor,
+}: {
+  activeColor: string;
+  customSelectionColor?: string;
+}) => {
+  if (typeof customSelectionColor !== 'undefined') {
+    return customSelectionColor;
+  }
+
+  if (Platform.OS === 'android') {
+    return color(activeColor).alpha(0.54).rgb().string();
+  }
+
+  return activeColor;
+};
+
 const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => {
   if (theme.isV3) {
     if (disabled) {
@@ -465,6 +485,7 @@ const getOutlinedOutlineInputColor = ({
 export const getFlatInputColors = ({
   underlineColor,
   activeUnderlineColor,
+  customSelectionColor,
   textColor,
   disabled,
   error,
@@ -472,29 +493,33 @@ export const getFlatInputColors = ({
 }: {
   underlineColor?: string;
   activeUnderlineColor?: string;
+  customSelectionColor?: string;
   textColor?: string;
   disabled?: boolean;
   error?: boolean;
   theme: InternalTheme;
 }) => {
   const baseFlatColorProps = { theme, disabled };
+  const activeColor = getActiveColor({
+    ...baseFlatColorProps,
+    error,
+    activeUnderlineColor,
+    mode: 'flat',
+  });
+
   return {
     inputTextColor: getInputTextColor({
       ...baseFlatColorProps,
       textColor,
       mode: 'flat',
     }),
-    activeColor: getActiveColor({
-      ...baseFlatColorProps,
-      error,
-      activeUnderlineColor,
-      mode: 'flat',
-    }),
+    activeColor,
     underlineColorCustom: getFlatUnderlineColor({
       ...baseFlatColorProps,
       underlineColor,
     }),
     placeholderColor: getPlaceholderColor(baseFlatColorProps),
+    selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
     errorColor: theme.colors.error,
     backgroundColor: getFlatBackgroundColor(baseFlatColorProps),
   };
@@ -503,6 +528,7 @@ export const getFlatInputColors = ({
 export const getOutlinedInputColors = ({
   activeOutlineColor,
   customOutlineColor,
+  customSelectionColor,
   textColor,
   disabled,
   error,
@@ -510,12 +536,19 @@ export const getOutlinedInputColors = ({
 }: {
   activeOutlineColor?: string;
   customOutlineColor?: string;
+  customSelectionColor?: string;
   textColor?: string;
   disabled?: boolean;
   error?: boolean;
   theme: InternalTheme;
 }) => {
   const baseOutlinedColorProps = { theme, disabled };
+  const activeColor = getActiveColor({
+    ...baseOutlinedColorProps,
+    error,
+    activeOutlineColor,
+    mode: 'outlined',
+  });
 
   return {
     inputTextColor: getInputTextColor({
@@ -523,17 +556,13 @@ export const getOutlinedInputColors = ({
       textColor,
       mode: 'outlined',
     }),
-    activeColor: getActiveColor({
-      ...baseOutlinedColorProps,
-      error,
-      activeOutlineColor,
-      mode: 'outlined',
-    }),
+    activeColor,
     outlineColor: getOutlinedOutlineInputColor({
       ...baseOutlinedColorProps,
       customOutlineColor,
     }),
     placeholderColor: getPlaceholderColor(baseOutlinedColorProps),
+    selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
     errorColor: theme.colors.error,
   };
 };
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index fed887da57..f32f1ad760 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -174,10 +174,6 @@ exports[`correctly applies a component as the text label 1`] = `
           Object {
             "margin": 0,
           },
-          Object {
-            "paddingLeft": 16,
-            "paddingRight": 16,
-          },
           Object {
             "height": 56,
           },
@@ -192,6 +188,8 @@ exports[`correctly applies a component as the text label 1`] = `
             "fontWeight": undefined,
             "letterSpacing": 0.15,
             "lineHeight": undefined,
+            "paddingLeft": 16,
+            "paddingRight": 16,
             "textAlign": "left",
             "textAlignVertical": "center",
           },
@@ -368,10 +366,6 @@ exports[`correctly applies cursorColor prop 1`] = `
           Object {
             "margin": 0,
           },
-          Object {
-            "paddingLeft": 16,
-            "paddingRight": 16,
-          },
           Object {
             "height": 56,
           },
@@ -386,6 +380,8 @@ exports[`correctly applies cursorColor prop 1`] = `
             "fontWeight": undefined,
             "letterSpacing": 0.15,
             "lineHeight": undefined,
+            "paddingLeft": 16,
+            "paddingRight": 16,
             "textAlign": "left",
             "textAlignVertical": "center",
           },
@@ -562,10 +558,6 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
           Object {
             "margin": 0,
           },
-          Object {
-            "paddingLeft": 16,
-            "paddingRight": 16,
-          },
           Object {
             "height": 56,
           },
@@ -580,6 +572,8 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "fontWeight": undefined,
             "letterSpacing": 0.15,
             "lineHeight": undefined,
+            "paddingLeft": 16,
+            "paddingRight": 16,
             "textAlign": "left",
             "textAlignVertical": "center",
           },
@@ -982,10 +976,6 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
           Object {
             "margin": 0,
           },
-          Object {
-            "paddingLeft": 16,
-            "paddingRight": 16,
-          },
           Object {
             "height": 56,
           },
@@ -1000,6 +990,8 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
             "fontWeight": undefined,
             "letterSpacing": 0.15,
             "lineHeight": undefined,
+            "paddingLeft": 16,
+            "paddingRight": 16,
             "textAlign": "left",
             "textAlignVertical": "center",
           },
@@ -1178,10 +1170,6 @@ exports[`correctly applies textAlign center 1`] = `
           Object {
             "margin": 0,
           },
-          Object {
-            "paddingLeft": 16,
-            "paddingRight": 16,
-          },
           Object {
             "height": 56,
           },
@@ -1196,6 +1184,8 @@ exports[`correctly applies textAlign center 1`] = `
             "fontWeight": undefined,
             "letterSpacing": 0.15,
             "lineHeight": undefined,
+            "paddingLeft": 16,
+            "paddingRight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -1372,10 +1362,6 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
           Object {
             "margin": 0,
           },
-          Object {
-            "paddingLeft": 16,
-            "paddingRight": 56,
-          },
           Object {
             "height": 56,
           },
@@ -1390,6 +1376,8 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "fontWeight": undefined,
             "letterSpacing": 0.15,
             "lineHeight": undefined,
+            "paddingLeft": 16,
+            "paddingRight": 56,
             "textAlign": "left",
             "textAlignVertical": "center",
           },
@@ -1756,10 +1744,6 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
           Object {
             "margin": 0,
           },
-          Object {
-            "paddingLeft": 56,
-            "paddingRight": 56,
-          },
           Object {
             "height": 56,
           },
@@ -1774,6 +1758,8 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "fontWeight": undefined,
             "letterSpacing": 0.15,
             "lineHeight": undefined,
+            "paddingLeft": 56,
+            "paddingRight": 56,
             "textAlign": "left",
             "textAlignVertical": "center",
           },