Alignment

src/components/forms/TextField.tsx

@@ -201,7 +201,10 @@ export function createInput(Component: typeof TextInput) {
             a.text_md,
             t.atoms.text,
             a.px_xs,
-            {lineHeight: a.text_md.lineHeight * 1.1875},
+            {
+              lineHeight: a.text_md.lineHeight * 1.1875,
+              textAlignVertical: 'top',
+            },
           ]}
         />
 

src/components/forms/Toggle.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Pressable, View, ViewStyle} from 'react-native'
 
-import {useTheme, atoms as a, web} from '#/alf'
+import {useTheme, atoms as a, web, native} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 
@@ -241,6 +241,9 @@ export function Label({children}: React.PropsWithChildren<{}>) {
           userSelect: 'none',
           color: disabled ? t.palette.contrast_400 : t.palette.contrast_600,
         },
+        native({
+          paddingTop: 3,
+        }),
       ]}>
       {children}
     </Text>
@@ -345,8 +348,6 @@ export function Checkbox() {
         {
           height: 20,
           width: 20,
-          backgroundColor: selected ? t.palette.primary_500 : undefined,
-          borderColor: selected ? t.palette.primary_500 : undefined,
         },
         baseStyles,
         hovered || focused ? baseHoverStyles : {},
@@ -445,8 +446,6 @@ export function Radio() {
         {
           height: 20,
           width: 20,
-          backgroundColor: selected ? t.palette.primary_500 : undefined,
-          borderColor: selected ? t.palette.primary_500 : undefined,
         },
         baseStyles,
         hovered || focused ? baseHoverStyles : {},

src/components/forms/ToggleButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, native} from '#/alf'
 import {Text} from '#/components/Typography'
 
 import * as Toggle from '#/components/forms/Toggle'
@@ -91,14 +91,17 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
   return (
     <View
       style={[
-        a.px_lg,
-        a.py_md,
-        t.atoms.bg,
-        t.atoms.border,
         {
           borderLeftWidth: 1,
           marginLeft: -1,
         },
+        a.px_lg,
+        a.py_md,
+        native({
+          paddingTop: 14,
+        }),
+        t.atoms.bg,
+        t.atoms.border,
         baseStyles,
         activeStyles,
         (state.hovered || state.focused || state.pressed) && hoverStyles,