Default

The following examples demonstrates the Text Boxes in action.

warning

In documentation apprence of components may not be in correct way. To view the component in exact design please view the demo app.

Usecase Examples

Usecase Examples with default style.

Colors

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:18:09
 * @ Description: Examples of TextBox component with different colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='primary' color='primary'/>
        <TextBox placeholder='dark' color='dark'/>
        <TextBox placeholder='info' color='info'/>
        <TextBox placeholder='warning' color='warning' />
        <TextBox placeholder='default' color='default'/>
        <TextBox placeholder='rgb(237, 20, 61)' color='rgb(237, 20, 61)'/>
        <TextBox placeholder='hwb(349 8% 7%)' color='hwb(349 8% 7%)'/>
        <TextBox placeholder='hsl(349, 86%, 50%)' color='hsl(349, 86%, 50%)' />

        <TextBox placeholder='secondary' color='secondary'/>
        <TextBox placeholder='light' color='light'/>
        <TextBox placeholder='success' color='success'/>
        <TextBox placeholder='error' color='error'/>
        <TextBox placeholder='crimson' color='crimson'/>
        <TextBox placeholder='#ed143d' color='#ed143d'/>
        <TextBox placeholder='rgba(237, 20, 61, 0.5)' color='rgba(237, 20, 61, 0.5)'/>
        <TextBox placeholder='hsla(349, 86%, 50% / 0.5)' color='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Border Colors

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:41:55
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:17:16
 * @ Description: Examples of TextBox component with border colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='crimson' borderColor='crimson' />
        <TextBox placeholder='#ed143d' borderColor='#ed143d' />
        <TextBox placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
        <TextBox placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />

        <TextBox placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
        <TextBox placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
        <TextBox placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
        <TextBox placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Active Border Colors

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:47:01
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:16:32
 * @ Description: Examples of TextBox component in with active border colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='crimson' activeBorderColor='crimson' />
        <TextBox placeholder='#ed143d' activeBorderColor='#ed143d' />
        <TextBox placeholder='hwb(349 8% 7%)' activeBorderColor='hwb(349 8% 7%)' />
        <TextBox placeholder='rgba(237, 20, 61 / 0.5)' activeBorderColor='rgba(237, 20, 61 / 0.5)' />

        <TextBox placeholder='rgb(237, 20, 61)' activeBorderColor='rgb(237, 20, 61)' />
        <TextBox placeholder='rgba(237, 20, 61, 0.5)' activeBorderColor='rgba(237, 20, 61, 0.5)' />
        <TextBox placeholder='hsl(349, 86%, 50%)' activeBorderColor='hsl(349, 86%, 50%)' />
        <TextBox placeholder='hsla(349, 86%, 50% / 0.5)' activeBorderColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Border Width

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 23:07:10
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:17:51
 * @ Description: Examples of TextBox component with borders width.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='none (default)' borderWidth='none' />
        <TextBox placeholder='hairline' borderWidth='hairline' />
        <TextBox placeholder='thin' borderWidth='thin' />
        <TextBox placeholder='base' borderWidth='base' />
        <TextBox placeholder='thick' borderWidth='thick' />
        <TextBox placeholder='3' borderWidth={3}/>
      </div>
    );
  }
}

Border Radius

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-15 22:50:56
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:17:34
 * @ Description: Examples of TextBox component border radius.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='none' radius='none'/>
        <TextBox placeholder='medium' radius='medium'/>
        <TextBox placeholder='full radius' radius='full'/>
        <TextBox placeholder='small' radius='small'/>
        <TextBox placeholder='large' radius='large' />
        <TextBox placeholder='12' radius={12} />
      </div>
    );
  }
}

Background Color

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-15 22:55:08
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:16:58
 * @ Description: Examples of TextBox component with background colors.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='crimson' borderColor='crimson' />
        <TextBox placeholder='#ed143d' borderColor='#ed143d' />
        <TextBox placeholder='hwb(349 8% 7%)' borderColor='hwb(349 8% 7%)' />
        <TextBox placeholder='rgba(237, 20, 61 / 0.5)' borderColor='rgba(237, 20, 61 / 0.5)' />
        <TextBox placeholder='rgb(237, 20, 61)' borderColor='rgb(237, 20, 61)' />
        <TextBox placeholder='rgba(237, 20, 61, 0.5)' borderColor='rgba(237, 20, 61, 0.5)' />
        <TextBox placeholder='hsl(349, 86%, 50%)' borderColor='hsl(349, 86%, 50%)' />
        <TextBox placeholder='hsla(349, 86%, 50% / 0.5)' borderColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Active Background Color

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-15 22:57:49
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 19:53:47
 * @ Description: Examples of TextBox component in with activeBackgroundColor property.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='crimson' activeBackgroundColor='crimson' />
        <TextBox placeholder='#ed143d' activeBackgroundColor='#ed143d' />
        <TextBox placeholder='hwb(349 8% 7%)' activeBackgroundColor='hwb(349 8% 7%)' />
        <TextBox placeholder='rgba(237, 20, 61 / 0.5)' activeBackgroundColor='rgba(237, 20, 61 / 0.5)' />
        <TextBox placeholder='rgb(237, 20, 61)' activeBackgroundColor='rgb(237, 20, 61)' />
        <TextBox placeholder='rgba(237, 20, 61, 0.5)' activeBackgroundColor='rgba(237, 20, 61, 0.5)' />
        <TextBox placeholder='hsl(349, 86%, 50%)' activeBackgroundColor='hsl(349, 86%, 50%)' />
        <TextBox placeholder='hsla(349, 86%, 50% / 0.5)' activeBackgroundColor='hsla(349, 86%, 50% / 0.5)' />
      </div>
    );
  }
}

Type

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-15 23:00:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-17 19:55:35
 * @ Description: Examples of TextBox component with type properties.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='outlined' type='outlined' />
        <TextBox placeholder='underlined' type='underlined' />
      </div>
    );
  }
}

Sizes

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-16 20:51:10
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:18:24
 * @ Description: Examples of TextBox component with different sizes.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='small' size='small' />
        <TextBox placeholder='default' size='default' />
        <TextBox placeholder='medium' size='medium' />
        <TextBox placeholder='large' size='large' />
      </div>
    );
  }
}

Readonly

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-16 20:53:54
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:11:15
 * @ Description: Examples of TextBox component in readonly state.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='outlined' type='outlined' readOnly />
        <TextBox placeholder='underlined' type='underlined' readOnly />
      </div>
    );
  }
}

Disabled

Preview

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-16 20:53:54
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 21:11:15
 * @ Description: Examples of TextBox component in readonly state.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='outlined' type='outlined' readOnly />
        <TextBox placeholder='underlined' type='underlined' readOnly />
      </div>
    );
  }
}

Label

Preview

Label

 Custom Element Label

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 22:35:48
 * @ Description: Examples of TextBox component with labels.
 */

import React from 'react';
import { StyleSheet, Text, Alert, Platform } from "react-native";
import Icon from '@flexnative/icons';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Input with text label' label="Label" />
        <TextBox placeholder='Input with custom element as label' label={<Label />} />
      </div>
    );
  }
}

function Label() {
  const openAlert = () =>
    Platform.OS === 'web'
      ? alert('Custom Element as label')
      : Alert.alert('Alert Title', 'Custom Element as label', [
          {text: 'OK'},
        ]);
    
  return <Text style={styles.label}>
    <Icon name="avatar" onPress={openAlert} /> Custom Element Label
  </Text>;
}

const styles = StyleSheet.create({
  label: {
    color: 'crimson'
  },
  row: {
    columnGap: 16,
    flexDirection: "row",
    width: '100%',
    backgroundColor: 'transparent'
  },
  column: {
    flex: 1,
    rowGap: 16,
    alignContent: 'center',
    justifyContent: 'space-evenly',
    backgroundColor: 'transparent'
  }
});

Label Style

Preview

Label

Label

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 22:38:18
 * @ Description: Examples of TextBox component with custom label styles.
 */

import React from 'react';
import { StyleSheet, ColorValue, StyleProp, TextStyle } from "react-native";
import { StateCallbackType, TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Style with StyleProp<TextStyle>' label="Label" labelStyle={styles.label} />
        <TextBox placeholder='Style with function' label="Label" labelStyle={labelStyles('rgb(35, 189, 224)', 'crimson')} />
      </div>
    );
  }
}

const labelStyles = (defaultColor: ColorValue, activeColor: ColorValue) => {
  return (state: StateCallbackType): StyleProp<TextStyle> => {
    return [
      {
        color: state.focused ? activeColor : defaultColor
      }
    ]
  }
} 

const styles = StyleSheet.create({
  label: {
    color: 'crimson'
  }
});

Helper Text

Preview

Helper text

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 22:42:14
 * @ Description: Examples of TextBox component with helper text.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='input with helper text' helperText="Helper text" />
      </div>
    );
  }
}

Max Length

Preview

0 / 15

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 22:47:07
 * @ Description: Examples of TextBox component with max length, number of digits.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Max length' maxLength={15} />
      </div>
    );
  }
}

Prefix

Preview





Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 22:51:08
 * @ Description: Examples of TextBox component with prefix.
 */

import React from 'react';
import { Alert, Platform } from 'react-native';
import Icon from '@flexnative/icons';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Input with icon prefix' prefix="star" />
        <TextBox placeholder='Input with custom element as prefix' prefix={<Prefix />} />
      </div>
    );
  }
}

function Prefix() {
  const openAlert = () =>
    Platform.OS === 'web'
      ? alert('Custom Element as prefix')
      : Alert.alert('Alert Title', 'Custom Element as prefix', [
          {text: 'OK'},
        ]);
    
  return <Icon name="avatar" onPress={openAlert} />;
}

Prefix Style

Preview





Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 22:54:54
 * @ Description: Examples of TextBox component with prefix with custom styles.
 */

import React from 'react';
import { ColorValue, StyleProp, StyleSheet, TextStyle } from "react-native";
import { TextBox, StateCallbackType } from '@flexnative/inputs';


export default class extends React.PureComponent {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Style with StyleProp<TextStyle>' prefix="star" prefixStyle={styles.prefix} />
        <TextBox placeholder='Style with function' prefix="star" prefixStyle={prefixStyle('rgb(35, 189, 224)', 'crimson')} />
      </div>
    );
  }
}

const prefixStyle = (defaultColor: ColorValue, activeColor: ColorValue) => {
  return (state: StateCallbackType): StyleProp<TextStyle> => {
    return [
      {
        color: state.focused ? activeColor : defaultColor
      }
    ]
  }
} 

const styles = StyleSheet.create({
  prefix: {
    color: 'crimson'
  }
});

Surfix

Preview





Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 23:04:40
 * @ Description: Examples of TextBox component with different colors.
 */

import React from 'react';
import { Alert, Platform } from "react-native";
import Icon from '@flexnative/icons';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Input with icon suffix' suffix="star" />
        <TextBox placeholder='Input with custom element as suffix' suffix={<Suffix />} />
      </div>
    );
  }
}

function Suffix() {
  const openAlert = () =>
    Platform.OS === 'web'
      ? alert('Custom Element as suffix')
      : Alert.alert('Alert Title', 'Custom Element as suffix', [
          {text: 'OK'},
        ]);
    
  return <Icon name="avatar" onPress={openAlert} />;
}

Surfix Style

Preview





Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 23:06:26
 * @ Description: Examples of TextBox component with Suffix with custom styles.
 */

import React from 'react';
import { StyleSheet, ColorValue, StyleProp, TextStyle } from "react-native";
import { TextBox, StateCallbackType } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Style with StyleProp<TextStyle>' suffix="star" suffixStyle={styles.prefix} />
        <TextBox placeholder='Style with function' suffix="star" suffixStyle={suffixStyle('rgb(35, 189, 224)', 'crimson')} />
      </div>
    );
  }
}

const suffixStyle = (defaultColor: ColorValue, activeColor: ColorValue) => {
  return (state: StateCallbackType): StyleProp<TextStyle> => {
    return [
      {
        color: state.focused ? activeColor : defaultColor
      }
    ]
  }
} 

const styles = StyleSheet.create({
  prefix: {
    color: 'crimson'
  }
});

Adornments Separator

Preview





Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-10-14 22:35:25
 * @ Modified by: Redon Alla
 * @ Modified time: 2024-10-16 23:09:39
 * @ Description: Examples of TextBox component with AdornmentSeparator.
 */

import React from 'react';
import { TextBox } from '@flexnative/inputs';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block form-input'>
        <TextBox placeholder='Prefix Separator' prefix="avatar" prefixSeparator />
        <TextBox placeholder='Suffix Separator' suffix="avatar" suffixSeparator />
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

render(<TextBox
    prefixSeparator
    placeholder='Play with props to see live changes'
    color='primary'
    borderColor='crimson'
    borderWidth='thick'
    radius='full'
    size='large'
    prefix="star"
  />);

Result

Loading...