TextInput

    <Stack gap="m">
      <TextInput label="Label" placeholder="With label" id="wLabelExample"/>
      <TextInput placeholder="Without label" id="woLabelExample"/>
    </Stack>
  

    <TextInput label="Label" hint="Hint" id="wHintExample"/>
  

    <TextInput icon={<IconSearch />} label="City" placeholder="Search" id="iconExample"/>
  

    <Stack gap="m">
      <TextInput
        label="Email"
        placeholder="Email"
        id="emailExample"
        type="email"
        value="grain@flodesk.com"
        onChange={() => {}}
      />
      <TextInput
        label="Password"
        placeholder="Password"
        id="passwordExample"
        type="password"
        value="0123456789"
        onChange={() => {}}
      />
    </Stack>

    <TextInput
      id="errorExample"
      label="City"
      value="Netherlands"
      hasError
      errorMessage="Netherlands is not a city"
      onChange={() => {}}
    />
  

    <Stack gap="m">
      <TextInput
        id="isReadOnlyExample"
        label="City"
        value="Netherlands"
        isReadOnly
        onChange={() => {}}
      />

      <TextInput
        id="disabledExample"
        label="City"
        value="Netherlands"
        isDisabled
        onChange={() => {}}
      />
    </Stack>

    () => {
      const [value, setValue] = useState('Default value');
      return (
        <TextInput
          id="withClearExample"
          value={value}
          icon={<IconSearch />}
          onChange={(e) => setValue(e.target.value)}
          onClear={() => setValue('')}
        />
      )
    }

    <Box padding="l2" backgroundColor="background2" borderSide="all" radius="m">
      <TextInput 
        backgroundColor="background" 
        label="City" 
        id="colorExample"
      />
    </Box>
  

    () => {
      const [value, setValue] = useState('Default value');
      return (
        <Stack gap="l">
          <div>{value}</div>

          <TextInput
            id="withStateExample"
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
        </Stack>
      )
    }

    <>
      <TextInput.Label htmlFor="customLabelExample">Label</TextInput.Label>
      <TextInput.Hint>Hint</TextInput.Hint>
      <Arrange gap="s" alignItems="start" columns="1fr auto" marginTop="var(--grn-form-control-label-gap)">
        <TextInput
          id="customLabelExample"
          errorMessage="Error message"
        />
        <Arrange gap="s">
          <Button>Cancel</Button>
          <Button variant="accent">Save</Button>
        </Arrange>
      </Arrange>
    </>